开发工具推荐：await-to-js

前言：

1. .then().catch()

2. async + await

3. await-to-js

前言：

今天给大家推荐一块我觉得用着还不错的工具，await-to-js；

await-to-js - npm GitHub - scopsy/await-to-js: Async await wrapper for easy error handling without try-catch

借用官网的一句话：Async await wrapper for easy error handling，方便让我们去处理错误，降低我们的编写成本；

安装：

npm i await-to-js --save

引用：

import to from 'await-to-js';

ok，我们先来写一个假装一步请求的方法：

function httpGetList(status) {return new Promise((reslove, reject) => {if (status === 200) {reslove({ code: 200, data: [], msg: '操作成功' });} else if (status === 500) {reject(new Error('http 请求错误'));}});
}

在我们不使用此工具之前，看我们的调用方式，假设我们的请求发生了错误哈

1. .then().catch()

下面这么写是ok的

httpGetList(500).then((resp) => {console.log(resp);
}).catch((err) => {});

但是当我们懒省事不写.catch()时；

httpGetList(500).then((resp) => {console.log(resp);
});

2. async + await

下面这种因为没有错误捕获，所以也会报错。

async getListSuccess() {const resp = await httpGetList(500);console.log(resp);
}

结合try catch，这种倒是ok，成功捕获了错误，但是又多了几行代码

try {const resp = await httpGetList(500);console.log(resp);
} catch (error) {console.log(error);
}

有意思的写法：async + await + catch,主打一个随心所欲

const resp = await httpGetList(500).catch((err) => {console.log(err);
});
console.log(resp);

ok，如今我们有了await-to-js,看看会发生什么变化？

3.await-to-js

const [err, resp] = await to(httpGetList(500));
console.log('err===>', err);
console.log('resp===>', resp);

我们就拿到了捕获的异常err，以及resp，下面就是你想怎么判断就怎么判断。

比我请求，只看code是不是200请求成功，其他的一概不管。我就可以这样写；

async getListSuccess() {const [err, resp] = await to(httpGetList(200));if (resp?.code === 200) {console.log(resp.data);this.list = resp.data;}console.log('继续执行吧');
}