别在让你的 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] = responseresolve(response)}).catch( error => {result[1] = errorresolve(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": "桃小瑞"}
} 

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取