虽然一直也有用到promise, 知道它代表了异步操作成功或者失败的一个对象,至于它到底是什么,怎么解决了回调地狱的问题,就解释不出个所以然,所以打算研究一下并记录下来供学习参考。
背景
JavaScript是单线程的,这就意味着两段脚本不能同时运行,由于这种设定,所有的js事件都必须是异步执行,没有promise之前,解决异步都是依赖回调,典型的异步执行操作有ajax,事件监听,setTimeout等,当你想执行多个具备前后顺序的异步操作时,代码会嵌套许多层,导致出现问题也很难调试。
什么是promise
Promise是异步编程的一种解决方案,比原来的回调函数更加合理。从语法上来讲它是一个对象,可以获取异步操作的状态。
Promise的特点
一.Promise对象代表一个异步操作,有三种状态:pengding(进行中),fulfilled(已成功),rejected(已失败️)。 Promise的状态由异步操作的结果决定。
二.Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能:从pengding变为fulfilled和从pengding变为rejected。
Promise的优点
Promise最直接的好处就是链式调用。通过.then的形式可以添加多个回调函数,它们会按照插入顺序独立运行。
Promise的缺点
一.无法取消。一旦新建它就会立即执行,无法中途取消。
二.如果不设置回调函数,Promise内部抛出的错误不会反应到外部。
三.当Promise处于pengding状态时,无法得知目前进行到哪个阶段,是刚开始还是即将完成。
基本用法
ES6规定,Promise对象是一个构造函数,用来生成Promise实例。
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由Javascript引擎提供。resolve函数在异步操作成功时调用,并将异步操作的结果作为参数传递出去;reject函数在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
下面代码把异步操作成功调用的代码写在.then()中,把异步操作失败调用的方法写在.catch()中
/* post 方法 promise 封装 */
const postWrap = (url, params) => {
return new Promise((resolve, reject) => {
instance.post(url, params).then(({
data
}) => resolve(data)).catch(err => reject(err));
})
}
复制代码
这里只讲了一些基本概念和基础用法。Promise还有许多Api,使用起来非常强大。