域名

Async/Await 你是会用,但是你知道怎么处理错误吗?

时间:2010-12-5 17:23:32  作者:系统运维   来源:应用开发  查看:  评论:0
内容摘要:前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心Promise封装请求大家平时如果使用Promise封装请求,那么当你使用这个请求函数的时候是这样的://

前言

大家好,但知道处我是理错林三心,用最通俗易懂的但知道处话讲最难的知识点是我的座右铭,基础是理错进阶的前提是我的初心

Promise封装请求

大家平时如果使用Promise封装请求,那么当你使用这个请求函数的但知道处时候是这样的:

Async/Await 你是会用,但是你知道怎么处理错误吗?

// 封装请求函数

Async/Await 你是会用,但是你知道怎么处理错误吗?

const request = (url, params) => {

Async/Await 你是会用,但是你知道怎么处理错误吗?

return new Promise((resolve, reject) => {

// ...do something

})

}

// 使用时

const handleLogin = () => {

request(

/basic/login,

{

usename: sunshine,

password: 123456

}

).then(res => {

// success do something

}).catch(err => {

// fail do something

})

}

可以看到,当你的理错请求成功时,会调用then方法,但知道处当你的理错请求失败时会调用catch方法。

async/await

Promise的但知道处出现解决了很多问题,但是理错如果请求多了且有顺序要求的站群服务器话,难免又会出现嵌套的但知道处问题,可读性较差,理错比如:

const handleLogin = () => {

request(

/basic/login,但知道处

{

usename: sunshine,

password: 123456

}

).then(res => {

// 登录成功后获取用户信息

request(

/basic/getuserinfo,

res.id

).then(info => {

this.userInfo = info

}).catch()

}).catch(err => {

// fail do something

})

所以这个时候async/await出现了,他的理错作用是:用同步的方式执行异步操作,上面的但知道处代码使用async/await的话可以改写成:

const handleLogin = async () => {

const res = await request(/basic/login, {

usename: sunshine,

password: 123456

})

const info = await request(/basic/getuserinfo, {

id: res.id

})

this.userInfo = info

}

这样的话代码的可读性比较高,而不会出现刚刚的嵌套问题,但是现在又有一个问题了,Promise有catch这个错误回调来保证请求错误后该做什么操作,但是async/await该如何捕获错误呢?

async-to-js

其实已经有一个库async-to-js已经帮我们做了这件事,我们可以看看它是怎么做的,它的香港云服务器源码只有短短十几行,我们应该读读它的源码,学学它的思想

源码很简单

/

**

* @param { Promise } 传进去的请求函数

* @param { Object= } errorExt - 拓展错误对象

* @return { Promise } 返回一个Promise

*/

export function to(

promise,

errorExt

) {

return promise

.then(data => [null, data])

.catch(err => {

if (errorExt) {

const parsedError = Object.assign({ }, err, errorExt)

return [parsedError, undefined]

}

return [err, undefined]

})

}

export default to

源码总结:to函数返回一个Promise且值是一个数组,数组之中有两个元素,如果索引为0的元素不为空值,说明该请求报错,如果索引0的元素为空值说明该请求没有报错,也就是成功。

使用很简单

我们该怎么去使用这个to函数呢?其实很简单,还是刚刚的例子

const handleLogin = async () => {

const [resErr, res] = await to(request(/basic/login, {

usename: sunshine,

password: 123456

}))

if (resErr) {

// fail do somthing

return

}

const [userErr, info] = await to(request(/basic/getuserinfo, {

id: res.id

}))

if (userErr) {

// fail do somthing

return

}

this.userInfo = info

}

所以说,偶尔看看一些库的源码,还是能学到东西的!!!

copyright © 2025 powered by 益强资讯全景  滇ICP备2023006006号-31sitemap