Promise 的使用 - 技术栈

为什么需要 Promise

异步操作的解决方案

在函数内有一个异步操作

js 复制代码

function request() {
    // 模拟异步操作
    setTimeout(() => {
      // 异步执行代码
      ...
    }, 3000);
}

// 调用函数
request()

通常我们会有以下需求：

获取到异步操作的结果；
异步操作结束后执行其他的操作；

这时候我们的解决思路是，定义一个回调函数，在异步操作执行结束后调用

js 复制代码

function request(..., callback) {
    // 模拟异步操作
    setTimeout(() => {
      // 异步执行代码
      
      // 回调函数   
      callback()
    }, 3000);
}

在调用函数时传递回调函数

js 复制代码

request(() => {
    console.log('异步执行结束了');
})

如何使用 Promise

Promise 的基本使用

1. 实例化一个 Promise 对象

js 复制代码

const promise = new Promise((reslove, reject) {
    // 成功执行
    reslove()
    // 失败执行
    reject()
})

2. then 方法

js 复制代码

// then 方法传入两个回调函数
// 第一个回调函数会在 Promise 执行 resolve 函数时被回调
// 第二个回调函数会在 Promise 执行 reject 函数时被回调
promise.then(() => {}, () => {})

Promise 的状态

Promise 对象的状态值有三种

pending
fulfilled
rejected

js 复制代码

new Promise((reslove, reject) => {
    ...
    // pending 待定

    reslove()
    // fulfilled 已完成
    
    reject()
    // rejected 已拒绝
}).then(() => { 

}, () => { 

})

默认是 pending 状态，执行 reslove 方法之后就变成 fulfilled 状态，执行 reject 方法之后就变成 rejected 状态。

Promise 的状态一旦确定下来就不能更改了，所以 reslove 方法跟 reject 方法只会触发一个。