await Streaking解决原理示例详解

目录前言优化async/awaitdemo.json关于Promise关于async/await总结前言我们现在在请求接口的过程中，已经习惯了async/await的写法，已经逐渐的代替了promis...

目录

前言

我们现在在请求接口的过程中，已经习惯了async/await的写法，已经逐渐的代替了promiswww.cppcns.come的写法，但我们在开发的过程中，都是混用的状态，当你体验async/await过的好，就会爱不释手。

async/await我们要拒绝 Streaking，啥叫 Streaking，我们看个代码。

const foo = async () =>  {
    const response = await axIOS.get('https://www.baidu.com')
    console.log(response);
}
foo()

一旦失败我们控制台就会出现报错，一个接口就是一个红色的。

此时，你想起我们还有try...catch...，可你知道吗？try...catch...并不是万能的，有时候他捕获不到异步的错误，再有就是每个async/await你都加一个try...catch...，一个项目中，并可能只出现一个借口调用的地方吧，每个都加，就请问你累不累。

const foo = async () =>  {
    try{
        const response = await axios.get('https://www.baidu.com')
        console.log(response);
    } catch (error) {
        console.log(error)
    }
}
foo()

优化async/await

经过上面一说，那我还不如用回promise。当你看到一长串的.then的时候你好维护吗？不烦吗？

那你说我们应该怎么办？我们需要从源头入手。

我们现在都会先基于axios/fetch进行二次封装对不？有时候我们还会三次封装对吧？这个封装就是我们的源头。

我们先看个promise的封装。

    // 封装
    const request = (option = {}) =>{
        return new Promise((resolve, reject) => {
            axios.get(option.url).then( response => {
                resolve(response)
            }).catch( error => {
                reject(error)
            });
        })
    }
    // 调用
    const foo = async () =>  {
        const response = await request({
            url: './demo.json'
        })
        console.log(response);
    }
    foo()

常见的封装就长上面这样，这样除了方便传参数，和没封有啥区别？

我的答案是没区别，那我们应该怎么来封装呢？

看下面的代码：

    // 封装
    const request =  async (option = {})  => {
        const result = [null, null]
        await new Promise((resolve, reject) => {
            axios.get(option.url).then( response => {
                result[0] = response
                resolve(response)
            }).catch( error => {
                result[1] = error
                resolve(error)
            });
        })
        return result
    }
    // 调用
    const foo = async () =>  {
        const [response, error] = await request({
            url: './demo.json'
        })
        console.log(response, error);
    }
    foo()

此时此刻，看到上面的封装，有朋友就有疑问了，那么怎么判断呢？

我们可以通过if()来判断呀，数组第一个为成功，第二个为失败，默认值都是null，我们只需要判断不等于null就可以了呀。像下面这样。

// 判断请求成功
if(response !== null){
    console.log('请求成功内容：-----');
    console.log(response.data.data);
    return
}

失败的话判断，同理。

    // 调用
    const foo = async () =>  {
        const [response, error] = await request({
            url: './demo1.json'
        })
        // 判断请求成功
        if(response !== null){
            console.log('请求成功内容：-----');
            console.log(response.data.data);
            return
        }
        // 判断请求失败
        console.log('请求失败内容：-----');
        console.log(error);
        ...
    }

{
    "code": 200,
    "data": {
        "name": "桃小瑞"
    }
}