反正我是这样处理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.回复加群，加入前端进阶群，和小伙伴一起学习讨论!