前端調用api接口方法總結

我用得最多的大概就是jquery中的ajax了吧，就從ajax總結起走：

1、ajax：

參數解釋：(主要就用到url、type、data、dataType、success、error等，其餘的看需求而定)

$.ajax({

　　url:"   ",                  //請求的地址，類型爲string

 

　　type:"   ",               //請求方式，類型爲string，兩種「get」或者「post」，默認爲「get」

 

　　timeout:                //要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

 

　　async:                   //要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

 

　　cache:                  //要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

 

　　data:                    //要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後

 

　　dataType:            //要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText  做爲回調函數參數傳遞。可用的類型以下：
                                      xml：返回XML文檔，可用JQuery處理。
                                      html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
                                      script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
                                      json：返回JSON數據。
                                      jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
                                      text：返回純文本字符串。

 

　　beforeSend:      //要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。

 

　　complete:         //要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。

 

　　success:            // 要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。

                                  (1)由服務器返回，並根據dataType參數進行處理後的數據。
                                  (2)描述狀態的字符串。

 

　　error:                //要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)

 

      contentType:    //要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

　　.......還有不少，只是基本用不到

})

 

2、用vue時，常常用到的。vue-resource和axios

1.vue-resource(基本再也不使用)

優勢：體積小、支持主流的瀏覽器、支持Promise API和URI Templates、支持攔截器。

用法：全局引入後，則在實例中使用。

經常使用的：

this.$http.get().then();

this.$http.post().then();

this.$http.jsonp().then();

 

2.axios（經常使用）

vue2.0以後，就再也不對vue-resource更新，而是推薦使用axios。基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用。

特色：

（1）在瀏覽器中發送 XMLHttpRequests 請求

（2）在 node.js 中發送 http請求

（3）支持 Promise API

（4）攔截請求和響應

（5）轉換請求和響應數據

（6）取消請求

（7）自動轉換爲JSON數據

（8）客戶端支持保護安全免受 CSRF/XSRF 攻擊

使用：

下載並引入後，在實例中使用：

GET方式：

axios.get().then().catch()

注：get方式傳參數能夠直接跟在url後面，也能夠經過param對象傳

 

POST方式：

axios.post().then().catch()

注：post方式傳參必須用對象傳

 

執行多個併發請求：

function A(){

　　return axios.get()

}

function B(){

　　return axios.post()

}

axios.all([A,B]).then(axios.spread(()=>{}))

還有一些詳細配置：https://www.cnblogs.com/peachmeimei/p/8916098.html

與axios一塊兒用的qs，用qs庫對數據進行編碼，有單獨筆記。

 

3、websocket

vue中使用的小demo：

export default{
data(){
     return {
          webSocket:null
      }
},
created(){
     //頁面剛進入時開啓長鏈接
      this.initWebSocket();
},
destroyed(){
     //頁面銷燬時關閉長鏈接
     this.webSocketClose();
},
methods: {
    initWebSocket(){            //初始化websocket
         const url='ws://121.40.165.18:8800';
         this.webSocket=new WebSocket(url);
         this.webSocket.onopen=this.socketOpen;
         this.webSocket.onerror=this.socketError;
         this.webSocket.onmessage=this.socketMessage;
         this.webSocket.onclose=this.webSocketClose;
    },
    socketOpen(){
           console.log('socket open');
    },
    socketError(e){
          console.log('socket error');
   },
    socketMessage(e){
         /* const redata = JSON.parse(e.data);*/
        //獲取數據而且處理數據的地方
        console.log(e);
   },
     websocketsend(agentData){//數據發送
         this.websock.send(agentData);
   },
    webSocketClose(e){
         console.log("connection closed");
    }
  }

}