axios中如何進(jìn)行同步請(qǐng)求(async+await)
axios進(jìn)行同步請(qǐng)求(async+await)
介紹
Axios 是一個(gè)基于 promise 的 HTTP 庫,它支持 Promise API。
像這樣:
axios.post('getsomething').then(
?? ?res => {
?? ??? ?// 進(jìn)行一些操作
?? ?}
)而 async/await 是一種建立在Promise之上的編寫異步或非阻塞代碼的新方法。async 是異步的意思,而 await 是 async wait的簡(jiǎn)寫,即異步等待。
所以從語義上就很好理解 async 用于聲明一個(gè) 函數(shù) 是異步的,而await 用于等待一個(gè)異步方法執(zhí)行完成。
那么想要同步使用數(shù)據(jù)的話,就可以使用 async+await 。
代碼示例
模擬一次異步請(qǐng)求
// 假設(shè)這是我們要請(qǐng)求的數(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ì)等到異步請(qǐng)求的結(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對(duì)promise進(jìn)行優(yōu)化
利用promise解決了發(fā)送ajax的回調(diào)地獄問題,是代碼看起來簡(jiǎn)潔了許多

但是如果要按順序發(fā)送多次請(qǐng)求,還是有些麻煩的,因?yàn)槲覀冃枰恢比?then來得到結(jié)果,所以在ES7中有了一種新的語法:async/await,可以更加方便的進(jìn)行異步操作,先看一下上面的請(qǐng)求如果在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è)公共請(qǐng)求路徑localhost:3000;
代碼看起來更加簡(jiǎn)潔,就像是同步執(zhí)行一樣,省略了.then取到結(jié)果的過程,
結(jié)果:

可以看到,得到的還是promise對(duì)象,同時(shí)按順序拿到了三個(gè)請(qǐng)求任務(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í)例對(duì)象
- await后面可以直接跟一個(gè) Promise實(shí)例對(duì)象
await + promise實(shí)例對(duì)象=要得到的結(jié)果
// async總結(jié)
//1, 有async標(biāo)識(shí)的函數(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í)例對(duì)象的結(jié)果,而不用再.then來獲取,這樣一來,就相當(dāng)于將異步的請(qǐng)求變成了同步任務(wù);
這樣的話我們回到最初的問題,按照一定的順序來發(fā)送網(wǎng)絡(luò)請(qǐng)求,下次請(qǐng)求需要用到上次請(qǐng)求所獲取的數(shù)據(jù). 現(xiàn)在如何實(shí)現(xiàn)呢?
接口是這樣的:

想要的到 world,則必須攜帶async1請(qǐng)求得到的數(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.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09

