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