异常处理
接上文,Promise中的方法没法保证不出错误,一旦报错,我们必须捕获错误来观察是哪里出了错。
我们故意不传参,制造一个错误来看看:
function ajax(param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (param) {
resolve(param)
} else {
reject(new Error('没有参数'))
}
}, 1000)
})
}
ajax().then(res => {
console.log(res)
return ajax(res + 1)
}, err => {
console.log(err)
})
由于没传参,Promise中会通过reject返回一个err错误,这个错误会被then方法中第二个回调函数接收。
如果正确传参,但是在Promise中发生了其他的错误,比如像下面这样调用一个不存在的函数,报的错误也会被then的第二个回调函数接收:
function ajax(param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (param) {
foo() // 调用一个不存在的函数
resolve(param)
} else {
reject(new Error('没有参数'))
}
}, 1000)
})
}
那么,在链式调用中,如果调用了很多的ajax方法,其错误处理是不是要写成这样:
ajax(1).then(res => {
console.log(res)
return ajax(res + 1)
}, err => {
console.log(err)
}).then(res2 => {
console.log(res2)
return ajax()
}, err2 => {
console.log(err2)
}).then(res3 => {
console.log(res3)
return ajax(res3 + 1)
}, err3 => {
console.log(err3)
})
这又是Promise使用的另外一个常见误区,在Promise的链式调用中,无论哪一个链式中出了错误,都会一层一层往后传,最后被catch捕获:
ajax(1).then(res => {
console.log(res)
return ajax(res + 1)
}).then(res2 => {
console.log(res2)
return ajax()
}).then(res3 => {
console.log(res3)
return ajax(res3 + 1)
}).catch(err => {
console.log(err)
})
这样就好得多了,不需要针对每一个链式环节中处理其可能出线的错误,只需要在最后的catch里处理错误即可。
静态方法
Promise有两个静态方法,无需new即可直接使用:
- Promise.resolve():手动创建一个状态为resolve的Promise对象,仅供参考,了解即可;
- Promise.reject():手动创建一个状态为reject的Promise对象,仅供参考,了解即可;
内容输出来源:拉勾大前端高薪训练营,以上文章中的内容根据老师讲课的语音和代码,结合自己的理解编辑完成。