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中,可以使用declare关键字来声明全局变量,这样的声明告诉编译器该变量是在其他地方定义的,而不需要实际的实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制的圆弧荡秋千效果,以完整实例形式分析了JavaScript集合html5的canvas绘制图形的相关技巧,需要的朋友可以参考下2016-01-01
本文主要介绍了Vue3基于countUp.js实现数字滚动的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
js获取图片长和宽的代码，大家可以参考下。2009-11-11
这篇文章主要介绍了微信小程序实现轨迹回放的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了JS实现简易日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
本篇文章主要介绍了JS触摸事件、手势事件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
下面小编就为大家带来一篇js中用cssText设置css样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了微信小程序引入Vant组件库过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了如何利用JavaScript实现仿淘宝固定右侧侧边栏效果，文中示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论