axios中如何進(jìn)行同步請求(async+await)

更新時(shí)間：2022年09月08日 10:26:09 作者：艾歡歡

這篇文章主要介紹了axios中如何進(jìn)行同步請求(async+await)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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屬性是固定的用法，用于獲取后臺的實(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é)果：