ajax、fetch、axiosの使い方

8704 ワード

  • jquery ajaxは、データ
    $.ajax 
    $.get
    $.post
    $.put
    $.delete
    $.load 
    
    $.ajax({
        url,
        timeout,  					//   
        beforeSend, 		 		//      
        dataType, 					//        
        type,   					//      
        data,   					//   
        headers, 					//     
        success,  					//     
        fail,    					//     
        complete    				//      
    })
    
    の使用方法を要求するために、jqファイルを導入してから$を使用する.ajax
  •  $.ajax({
       url:"    ",
        type:"POST/get",
        data:this.userinfo,  
        success(res){
            console.log(res);
        }
    })
    
  • fetchはブラウザの内蔵方法で、ファイルを導入する必要はなく、
  • を直接使用します.
    Fetch要求データfetchキャプチャデータは直接呼び出し1を導入する必要はない.最初のパラメータはURL 2である.2番目のパラメータはオプションパラメータ(data headers)3である.JavaScript Promisesを使用して結果/コールバックを処理します:(then成功コールバック)(catch失敗コールバック)
    //fetch      
    
      fetch(url,options)
      .then(res=>res.json())   //   json   
      .then(result=>result)    //      
      .catch(err=>err)
    

    POSTコミットの3つの比較的重要なcontent-type 1‘Content-Type’:‘アプリケーション/json’サービス側メッセージ本体はシーケンス化されたJSON文字列IEのほかに2‘Content-Type’:‘アプリケーション/x-www-form-urlencoded’がサーバに送信される前に、すべての文字がエンコードコミットされたデータはkey 1=val 1&key 2=val 2のようにエンコードされ、keyもvalueもURLトランスコードvar obj={username:“zkl”}username=zkl 3‘Content-Type’:‘multipart/form-data’は文字符号化されていない.ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります.
    fetch("url",{
          method:"POST",   							// POST    
           headers:{   								//     
            'Content-Type': 'application/json'   	//    JSON     
           },
           body:JSON.stringify(this.userinfo)
       })
       .then(res=>res.json())
       .then(res=>{
           console.log(res)
       })
    
    	fetch("url") 				//    
       .then(res=>res.json())   	//   json   
       .then(res=>console.log(res))
       .catch(err=>console.log(err))
    
    
  • axiosはPromiseに基づく.then().catch()
    axios({
        url, 
        method,  //     
        headers,  //     
        baseURL,  //        http://localhost:3000/
        data,    //  post            
        params ,   //        search  ?limit=8
        timeout,  //    
    }).then(result)
    .catch(err)
    
  •  axios({
           url:"    ",
            method:"GET"			//    
        }).then(res=>{				//     
            console.log(res)
        }).catch(err=>{				//     
            console.log(err)
        })