前端調用api接口方法總結

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

一、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"。該默認值適合大多數應用場合。
 　　.......還有很多，只是基本用不到 })

二、用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庫對數據進行編碼，有單獨筆記。

 

三、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"); } } }