反正我是这样处理async...await 错误的，你呢？
关注公众号 前端人，回复“加群”
添加无广告优质学习群
今天写这篇文章的原因是，最近看了很多人的代码，无论vue还是react项目，很多都在用async/await，貌似很多人都是没有异常处理的习惯，说的好像接口对接完100%就么问题了似的（直接把锅给后端，简直就是机智如我）
常规的开发中这样的：如下情况,也个页面显示一个app模块和一个热点新闻模块，它们之间其实是没有依赖关系的
如果获取appp的接口getApps出现挂了的情况，那getNews也不会被执行，那页面上都会显示空白，这么一个逻辑处理显然是不合理的，正确应该是它们之间的显示不存在依赖关系。各自有数据就直接显示各自的数据，其实很多人的代码都是这样，直接连异常处理都木有做。
这个时候可能说那就加个try catch处理一下不就完事了
import React, { useState, useEffect } from "react";
function App() {
const [apps, setApps] = useState({ apps: [] });
const [news, setNews] = useState({ news: [] });
useEffect(async () => {
const appData = await getApps({});//返回Promise的接口函数
const newData = await getNews();//返回Promise的接口函数
setApps(appData);
setNews(newData);
}, []);
return (
<div>
<div>全国App排行榜:div>
<ul>
{apps.map((item) => (
<li key={item.appId}>{item.appName}li>
))}
ul>
<div>今日热点新闻:div>
<ul>
{news.map((item) => (
<li key={item.id}>{item.title}li>
))}
ul>
div>
);
}
try catch搞一搞
import React, { useState, useEffect } from "react";
function App() {
const [apps, setApps] = useState({ apps: [] });
const [news, setNews] = useState({ news: [] });
useEffect(async () => {
let appData=[];
let newData=[];
try {
appData = await getApps({});
} catch (error) {
appData=[];
}
try {
newData = await getNews({});
} catch (error) {
appData=[];
}
setApps(appData);
setNews(newData);
}, []);
return (
<div>
// ...代码如上
div>
);
}
就这？？？？？？？，一堆让人脑壳疼的try catch，难道这就是传说中的一天5000行代码？
所以我们不仅仅要做异常处理，而是把异常处理做的更加完美，所以需要写一个工具函数来捕获异常统一处理，网上一起已经很早有方案了的，await-to-js,能够完美解决这个问题。
import React, { useState, useEffect } from "react";
import awaitTo from 'await-to-js';
function App() {
const [apps, setApps] = useState({ apps: [] });
const [news, setNews] = useState({ news: [] });
useEffect(async () => {
const [appError,appData] = awaitTo(getApps({}));
const [newError,newData] = awaitTo(getNews({}));
setApps(appData||[]);
setNews(newData||[]);
}, []);
return (
<div>
// ...代码如上
div>
);
}
await-to-js内部实现代码
// to.js
export default function to(promise) {
return promise.then(data => {
return [null, data];
})
.catch(err => [err]);
}
其实内部的代码很简单，把promise函数结果值和catch的值以数组形式返回,这下好了。
1.如果看到这里，说明你喜欢这篇文章，冲冲冲请 点赞、在看
2.关注公众号前端人，回复资料包领取我整理的前端进阶资料包
3.回复加群，加入前端进阶群，和小伙伴一起学习讨论!
评论