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原理的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JS的数组迭代方法,实例分析了javascript使用数组迭代的相关技巧,代码中备有较为详细的注释便于理解,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下2021-12-12
require.js配合插件text.js实现最简单的单页应用程序
这篇文章主要介绍了require.js配合插件text.js实现最简单的单页应用程序,需要的朋友可以参考下2016-07-07
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
这篇文章主要介绍了CKEditor 4.4.1 添加代码高亮显示插件功能,涉及ckeditor使用官方推荐Code Snippet插件的相关操作布局与使用注意事项,需要的朋友可以参考下2019-06-06
在写 JavaScript 脚本的时候，为了创建一个类，如果不使用框架，一般情况我们都会使用 prototype 来给要创建的类增加公有方法2009-06-06
排序有内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。我们这里说说八大排序就是内部排序。2015-04-04
JavaScript实现格式化字符串函数String.format
本文主要介绍了JavaScript实现格式化字符串函数String.format（可自动解析引号转义字符）。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
今天，这篇文章将利用HTML，CSS，JS的知识编写一个童年经典游戏 - 推箱子，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2022-11-11
这篇文章主要介绍了编译打包video.js的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-12-12
下面小编就为大家带来一篇浅谈js继承的实现及公有、私有、静态方法的书写。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论