axios中如何進行同步請求(async+await)
axios進行同步請求(async+await)
介紹
Axios 是一個基于 promise 的 HTTP 庫，它支持 Promise API。
像這樣：
axios.post('getsomething').then(
?? ?res => {
?? ??? ?// 進行一些操作
?? ?}
)而 async/await 是一種建立在Promise之上的編寫異步或非阻塞代碼的新方法。async 是異步的意思，而 await 是 async wait的簡寫，即異步等待。
所以從語義上就很好理解 async 用于聲明一個 函數(shù) 是異步的，而await 用于等待一個異步方法執(zhí)行完成。
那么想要同步使用數(shù)據(jù)的話，就可以使用 async+await 。
代碼示例
模擬一次異步請求
// 假設這是我們要請求的數(shù)據(jù)
function getSomething(n) {
return new Promise(resolve => {
// 模擬1s后返回數(shù)據(jù)
setTimeout(() => resolve(222), 1000);
});
}
function requestSomething() {
console.log(111);
getSomething().then(res => console.log(res));
console.log(333);
}
requestSomething() //這個時候會輸出 111，333，222
// 如果想要等數(shù)據(jù)返回后再執(zhí)行后面的代碼，那么就要使用 async/await
async function requestSomething() {
console.log(111);
// 這時something會等到異步請求的結果回來后才進行賦值，同時不會執(zhí)行之后的代碼
const something = await getSomething();
console.log(something)
console.log(333);
}
requestSomething() //這個時候會輸出 111，222，333
axios使用async/await對promise進行優(yōu)化
利用promise解決了發(fā)送ajax的回調(diào)地獄問題,是代碼看起來簡潔了許多
但是如果要按順序發(fā)送多次請求，還是有些麻煩的，因為我們需要一直去.then來得到結果，所以在ES7中有了一種新的語法:async/await，可以更加方便的進行異步操作，先看一下上面的請求如果在axios中用這個語法來寫是什么效果：
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
var ret = await axios.get('/data');
var ret1 = await axios.get('/data1');
var ret2 = await axios.get('/data2');
return [ret, ret1, ret2];
}
console.log(queryData());
第一行代碼是給axios設置了一個公共請求路徑localhost:3000;
代碼看起來更加簡潔,就像是同步執(zhí)行一樣,省略了.then取到結果的過程,
結果：
可以看到,得到的還是promise對象,同時按順序拿到了三個請求任務的結果;
解釋
1、axios基本用法
axios.get('http://localhost:3000/adata')
.then(function(ret){
// 注意data屬性是固定的用法，用于獲取后臺的實際數(shù)據(jù)
// console.log(ret.data)
console.log(ret)
})
axios中數(shù)據(jù)存放在ret.data中,想要得到結果同樣需要.then一下
2、async基本用法
async/await 處理異步操作：
- async函數(shù)返回一個Promise實例對象
- await后面可以直接跟一個 Promise實例對象
await + promise實例對象=要得到的結果
// async總結
//1, 有async標識的函數(shù)稱之為 異步函數(shù),
//2, 有async關鍵字出現(xiàn),await可以不出現(xiàn)
//3, 有await出現(xiàn),async必須出現(xiàn)
axios.defaults.baseURL = 'http://localhost:3000';
async function queryDate() {
// await的作用就是將異步函數(shù)變成同步操作
var ret = await axios.get('/adata')
console.log(ret.data);
}
queryDate();
結果：
也就是說,通過await可以直接取到promit實例對象的結果,而不用再.then來獲取,這樣一來,就相當于將異步的請求變成了同步任務;
這樣的話我們回到最初的問題,按照一定的順序來發(fā)送網(wǎng)絡請求,下次請求需要用到上次請求所獲取的數(shù)據(jù). 現(xiàn)在如何實現(xiàn)呢?
接口是這樣的:
想要的到 world,則必須攜帶async1請求得到的數(shù)據(jù)hello
axios.defaults.baseURL = 'http://localhost:3000/';
async function queryData() {
var info = await axios.get('async1');
console.log(info.data);
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function (data) {
console.log(data)
})
打印結果：
代碼看著就很舒服
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue的組件間傳值(包括Vuex)，全文通過舉例子及代碼的形式進行了一個簡單的介紹，希望大家能夠理解并且學習到其中知識2021-08-08
這篇文章主要介紹了vue中使用swiper失效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過實例代碼案例分析給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue.js數(shù)據(jù)響應式原理解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了如何在Vue.JS中使用圖標組件，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-08-08
這篇文章主要給大家介紹的是vue2 vue3中使用Echarts的相關資料，下面文章 會詳細介紹該內(nèi)容，感興趣的小伙伴不要錯過喲2021-09-09
這篇文章主要介紹了Vue實現(xiàn)背景更換顏色操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇Vue 第三方字體圖標引入 Font Awesome的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09