前言

我们现在在请求接口的过程中，已经习惯了async/await的写法，已经逐渐的代替了promise的写法，但我们在开发的过程中，都是混用的状态，当你体验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
}

失败的话判断，同理。

// 判断请求失败
if(error !== null){
    console.log('请求失败内容：-----');
    console.log(error);
    
    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);
        ...
    }

demo.json

下面为demo.json的内容。

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

关于Promise

关于Promise的详细说明及原理，以及手写一款Promise，感兴趣的朋友可以看我的这篇文章Promise详解-手写Promise，实现一款自己的简易Promise。

感兴趣了解Promise的核心之一的链式调用的朋友可以看我这篇文章Promise 链式调用原理-精简20行代码。

关于async/await

关于async/await我们会单独拿一篇文章来说，感兴趣的朋友可以关注我哦，因为当我发布后你可以更快的看到哦。

总结

以上就是我对async/await的一个简单封装。当然你如果有更好的建议或本文中不足的地方可以评论在下方，看到后会第一时间回复的哦。