其實也沒什么，就是用上ES7的異步函數，讓ajax使用起來更方便。這個方便主要是體現在：無回調 & 無then鏈式 & 輕松收集異常。

大致分3步：

1、封裝API類(這步不用異步函數)

這一步一般會單獨建立一個文件！

// 定義一個API類，專門用于獲取各類數據

class Api {

// 有的ajax請求是會做鑒權的，constructor里放這些鑒權參數

constructor (token) {

this.token =token;

}

// opt 里存放特定請求需要的參數，如url等

getUser (opt) {

return new Promise((resolve, reject) => {

$.ajax({

headers:{

token:this.token

},

url:opt.url,

data:opt.data,

success:function(data){

resolve(data);

},

error:function(error,status){

reject(error);

}

})

})

}

//其他API定義區

...

}

2、進一步封裝特定API(使用異步函數)

這一步一般是在特定的需要調用某API時用到

// const api = new Api(token)一般會提前執行，比如在vue組件script的import和export default之間執行，這也是為了避免該語句在每個具體api里都執行一次。

// 在vue中，可以將該函數放在methods里

async function loadUserData (opt) {

try{

const user = await api.getUser(opt)；

// 根據user狀態執行業務邏輯

...

}catch(e){

// 請求異常的處理邏輯

}

}

第三步：使用API

// 在vue中，可以將該代碼放在mounted里

loadUserData(opt)

經過這三步，基本就實現了無回調，無then鏈式調用和輕松處理錯誤這幾個比較煩人的問題啦！

參考

總結

以上是生活随笔為你收集整理的类似ajax封装函数,JS 封装一个async式的AJAX函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。