接口調(diào)用 async/await

• async/awit 處理異步操作

1. 基本用法

• async/awit 是ES7 引入的新語(yǔ)法，可以更加方便的進(jìn)行異步操作
• async 作為一個(gè)關(guān)鍵字放到函數(shù)前面
  • 任何一個(gè) async 函數(shù)都會(huì)隱式返回一個(gè) promise
• await 關(guān)鍵字只能在使用 async 定義的函數(shù)中使用
  • await后面可以直接跟一個(gè) Promise實(shí)例對(duì)象
  • await函數(shù)不能單獨(dú)使用

<script>
    /* 
        async/await 處理異步操作
    */

    // 配置請(qǐng)求的基準(zhǔn)URL地址
    axios.defaults.baseURL = 'http://localhost:3000/'

    /* axios.get('data').then((ret)=>{
        console.log(ret.data);
    }) */

    // async/await
    // await 后面跟promise 實(shí)例對(duì)象 Promise實(shí)例中處理異步任務(wù)
    // ret 得到異步結(jié)果
    /* async function queryData(){ // 異步任務(wù)
        var ret = await axios.get('adata');
        // console.log(ret);
        // console.log(ret.data);
        return ret.data;
    } */
    // queryData();

    // 異步任務(wù) Promise實(shí)例中處理異步任務(wù)
    async function queryData(){ 
        var ret = await new Promise((resolve, reject)=>{
            resolve('你好');
        }, 100);
        return ret;
    }
    queryData().then((data)=>{
        console.log(data);
    })
</script>

2. async/await 處理多個(gè)異步請(qǐng)求

• 多個(gè)異步請(qǐng)求的場(chǎng)景

<script>
    async function quertData(id){
        const info = await axios.get('asyncl');
        const ret = await axios.get(`asyncl2?info=`+info.data);
        return ret;
    }
    queryData.then(ret=>{
        console.log;
    })
</script>

<script>
    /* 
        async/await 處理多個(gè)異步任務(wù)
    */

    // axios.defaults.// 配置請(qǐng)求的基準(zhǔn)URL地址
    axios.defaults.baseURL = 'http://localhost:3000/';

    async function queryData(){
        var info = await axios.get('async1');
        var ret = await axios.get('async2?info=' + info.data);
        return ret;
    }

    queryData().then((data)=>{
        console.log(data);
        console.log(data.data)
    })
</script>