Promise详解

Promise对象

1.Promise是什么

1）含义

• 英译： 承诺
• 是一个对象
• 用来传递异步信息
• 代表未来才会知道结果的事件（异步操作）

2）特点

• 对象的状态不受外界的影响

Promise有3种状态：Pending(进行中) => Resolved(已完成，又称 Fullfilled) 或 Rejected(已失败)
只有异步操作的结果才能知道当前是哪种状态，任何其他操作都无法改变这个状态

• 一旦状态改变就不会再变

Promise状态改变只有两种可能： 【Pending => Resolved】 【Pending => Rejected】
只要其中之一发生状态就会凝固，不会再变

3）优点

• 将异步操作以同步操作的流程表达出来，避免层层嵌套的回调

4）缺点

• Promise一旦建立就会立即执行，无法中途取消
• 如果不设置回调函数，Promise 内部抛出的错误不会反应到外部
• 当处于Pending状态时，无法得知目前进展到哪一个状态（刚开始还是即将完成）

2. 应用

1）使用方式

step1 => 实例化Promise对象，通过 resolve 和 reject 两个函数将异步操作的结果传递出去
    resolve： 在异步操作成功时,将异步操作的结果作为参数传递出去【状态从 Pending 变成 Resolved】
    reject： 在异步操作失败时，将异步操作报出的错误作为参数传递出去【状态从 Pending 变成 Rejected】

var promise = new Promise((resolve, reject) => {
    // ... some code
    
    if(/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

step2 => 通过 then 指定 Resolved 和 Rejected 状态的回调函数
    第一个回调函数是对象的状态变为 Resolved 时调用
    第二个回调函数是对象的状态变为 Rejected 时调用

promise.then(value => {
    // success
},error => {
    // failure
})

2）示例

axios 与 Promise 异步调用接口获取数据

import Axios from 'axios';
import Qs from 'qs';

let axios = Axios.create({
    baseURL: '', // 基础url前缀
    headers: {'Content-Type': "multipart/form-data"}
});

function fetchApi (url) {
   return new Promise((resolve, reject) => {
    let params = {
        // ... some coed
    } 
    
    // Qs.stringify - 防止post请求参数无法请求到后台
    axios.post(url, Qs.stringify(param))
        .then(response => {
            resolve(response.data);
        }, error => {
            reject(error);
        })
        .catch(err => {
            reject(error)
        })
   });
}

3. 常用方法

1） Promise.prototype.then()

• 作用：为Promise 实例添加状态改变时的回调函数
• 参数：第一个参数为 resolved 状态的回调函数，第二个参数为 rejected 状态的回调函数（非必传）
• 返回：一个新的 Promise 实例（不是原来的那个 Promise 实例），因此可以采用 链式操作

runAsync1()
.then(data => {
    console.log(data);
    return runAsync2();
})
.then(data => {
    console.log(data);
    return runAsync3();
})
.then(
    data => console.log(data),
    err => console.log(err)
);

上面代码中，异步任务1执行成功后，再执行异步任务2，异步任务2成功后，再执行异步任务3
runAsync() 返回的是 Promise 对象,通过 then() 函数进行相应操作。如此情况，称作是“链式操作”

2） Promise.prototype.catch()

用于指定发生错误时的回调函数

getJSON('/post.json')
.then(post => {
    // 状态变为 resolved 时调用
    // ... some code
})
.catch(error => {
    // 状态变为 rejected 时调用
    // then方法指定的回调函数，如果运行中抛出错误,也会掉用
    console.log('发生错误', error);
})

3） Promise.prototype.finally()

用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···}) // 状态变为 resolved 时调用
.catch(error => {···}) // 状态变为 rejected 时调用
.finally(() => {···}); // 始终都会执行