await Streaking解决原理示例详解

 更新时间:2022年12月14日 15:11:14   作者:桃小瑞  
这篇文章主要为大家介绍了await Streaking解决原理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

我们现在在请求接口的过程中,已经习惯了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的一个简单封装,更多关于await Streaking原理的资料请关注脚本之家其它相关文章!

相关文章

  • 详解如何在TypeScript中声明全局变量

    详解如何在TypeScript中声明全局变量

    本文主要介绍了如何在 TypeScript 中声明全局变量,在TypeScript中,可以使用declare关键字来声明全局变量,这样的声明告诉编译器该变量是在其他地方定义的,而不需要实际的实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    这篇文章主要介绍了JavaScript+html5 canvas绘制的圆弧荡秋千效果,以完整实例形式分析了JavaScript集合html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
    2016-01-01
  • Vue3基于countUp.js实现数字滚动的插件

    Vue3基于countUp.js实现数字滚动的插件

    本文主要介绍了Vue3基于countUp.js实现数字滚动的插件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js获取图片长和宽度的代码

    js获取图片长和宽度的代码

    js获取图片长和宽的代码,大家可以参考下。
    2009-11-11
  • 微信小程序实现轨迹回放的示例代码

    微信小程序实现轨迹回放的示例代码

    这篇文章主要介绍了微信小程序实现轨迹回放的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JS实现简易日历效果

    JS实现简易日历效果

    这篇文章主要为大家详细介绍了JS实现简易日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JS触摸事件、手势事件详解

    JS触摸事件、手势事件详解

    本篇文章主要介绍了JS触摸事件、手势事件详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • js中用cssText设置css样式的简单方法

    js中用cssText设置css样式的简单方法

    下面小编就为大家带来一篇js中用cssText设置css样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    这篇文章主要介绍了微信小程序引入Vant组件库过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript仿淘宝实现固定右侧侧边栏

    JavaScript仿淘宝实现固定右侧侧边栏

    这篇文章主要为大家详细介绍了如何利用JavaScript实现仿淘宝固定右侧侧边栏效果,文中示例代码介绍的非常详细,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论