Promise 的基本用法
1.Promise的含义
含义
:Promise对象是异步编程的一种解决方案。比传统的解决方案更加强大。简而言之,Promise
是保存着某个未来才会结束的事件的一个容器。并且在ES6中规定Promise对象是一个构造函数,用来生成promise实例。
Promise
的两个特点:
(1) Promise对象状态不受外界影响 。共三种状态分别为:pending
(进行中)、fulfilled
(成功)、rejected
(失败)
(2) 一旦状态改变,就不会再变,任何时候都可以得到这个结果。状态的转变两种可能:一种是从pending
变为fulfilled
;另一种是从pending
变为rejected
。一旦这两只可能发生了变化,状态就会凝固不再发生变化。
2.Promise的基本使用
- 创建
Promise
实例 - 实例生成后使用
then
方法分别指定resolved
状态和rejected
状态的回调函数。
// 第一步:两种方式
// 1. 直接使用变量接收
const promise = new Promise((resolve, reject) => {
if (/* 异步操作成功 */) {
resolve('成功:resolved');
}else {
reject('失败:rejected');
}
})
// 2. 函数返回值形式
function async() {
return new Promise((resolve, reject) => {
if (/* 异步操作成功 */) {
resolve('成功:resolved');
}else {
reject('失败:rejected');
}
});
}
async()
// 第二步
// 1. 直接使用变量接收
promise.then((value) => {
// 执行 resolved 逻辑
},(error) => {
// 处理 error 时的逻辑
})
// 2. 函数返回值形式
async().then((value) => {
// 执行 resolved 逻辑
},(error) => {
// 处理 error 时的逻辑
})
// 简单小例子
let promise = new Promise((resolve, reject) => {
console.log('执行Promise');
resolve();
});
promise.then(function() {
console.log('resolved');
});
console.log('Hello');
// 打印结果依次为
// 执行Promise -> Hello -> resolved
3.Promise.then()
作用
:是为 Promise 实例添加状态改变时的回调函数。第一个是当状态变为resolve
时调用的回调函数,回调函数不能省略;第二个参数(可选)是当状态变为rejected
时调用的回调函数。
回调函数参数
:回调函数可以接受promise对象传递过来的值作为参数,第一个回调接受的是resolve(value)
传递的值;第二个回调接收的是reject(error)
传递的值。
// 案例
// setTimeout()定时器可以当作为一个简单的异步操作
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("状态为resolved");
// reject("状态为rejected");
}, 1000)
});
promise.then((value) => {
console.log(value);
},(error) => {
console.log(error);
})
// 输出结果
// 1. 当异步操作执行的是 resolve() 时
// 状态为resolved
// 2. 当异步操作执行的是 reject() 时
// 状态为rejected
// 3. 当 then() 的第二个回调函数参数不写时, 将无法接受 rejected 状态产生的异常
promise.then((value) => {
console.log(value);
})
// 只有当异步状态执行resolved时才会有输出
4.Promise.catch()
作用
:是 .then() 方法中方第二个参数 (回调函数) 的别名用于指定发生错误的回调函数。当 .then() 方法中的回调函数运行时,抛出的错误也会被 catch() 方法捕获。
// 1. 当异步状态变为rejected时触发回调
let p = new Promise((resolve, reject) => {
reject('Error');
})
p.then((val) => {
console.log(val);
}).catch((err) => {
console.log(err);
})
// 输出: Error
// 2. 捕获then()中的回调函数抛出的错误
let promise = new Promise((resolve, reject) => {
resolve('OK');
})
promise.then((val) => {
throw new Error('then回调中抛出的错误!')
console.log(val);
}).catch((err) => {
console.log(err)
})
// 输出:Error: then回调中抛出的错误!
注意
:
- 当Promise对象在 resolve() 语句之后再抛出错误,将不会被捕捉,等同于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。
- Promise对象的错误具有 “冒泡” 性质,错误会一直被传递,直至被捕捉到,故错误总会被下一个 catch() 捕捉到。
- 一般来说不要再 .then() 里面定义 Reject 状态的回调函数,总是使用 .catch() 方法。
let p = new Promise((resolve, reject) => {
resolve('OK');
throw new Error('resolve之后抛出的错误!')
})
p.then((val) => {
console.log(val);
}).catch((err) => {
console.log(err);
})
// 输出: OK
// 错误并不能被捕捉到
5.Promise.all()
说明
:Promise.all() 用于将多个 Promise 对象重新包装成一个 Promise 实例对像。方法接受的是一个数组参数。
const P = Promise.all([p1, p2, p3])
上述表达式中 P 的状态由 p1, p2, p3 决定:
- 只有当 p1, p2, p3 的状态都变成成功( fulfilled )时,p 的状态才会变成成功( fulfilled )。
- 如果 p1, p2, p3 中有一个状态变为 rejected,则 p 的状态就会变成 rejected。
本文地址:https://blog.csdn.net/weixin_45046594/article/details/105543643