Promise入门之基本用法

背景

在我们使用异步函数比如ajax进行编写代码，如果我们需要很多个ajax请求不同的接口，而下一个接口需要依赖上一个接口的返回值，这样，我们的代码则需要在各种回调函数中嵌套，这样一层一层地下去，就形成了回调地狱。
但是promise的出现则不需要嵌套就能解决这个问题。什么是promise？promise本质其实是一个对象，用于传递异步操作的信息。并且promise这个对象提供了相对应的API，满足我们的需求开发。

创建promise对象

let pro = new Promise(function(resolve, reject){
    // 异步处理逻辑
    // 处理完毕之后调用resolve或者reject
})

promise对象跟其他普通对象的创建方法一样，只需要new一个新的对象即可，接受一个函数作为参数，并且该函数中的参数分别为两个回调函数，用于进行不同的逻辑处理。
在定完一个promise对象之后，我们可以通过调用then方法来执行其对应的逻辑

pro.then(function(res){
    // 如果promise对象调用了resolve方法，则进入该函数逻辑
}, function(err){
    // 如果promise对象调用了reject方法，则进入该函数逻辑
})

promise的状态

promise的实例主要有以下三种状态：
①pending：处理中
②fulfilled：成功
③rejected：失败

pending状态的promise可以转化为fulfilled状态或者rejected状态，该转化不可逆且只能转化一次。同时，fulfilled状态和rejected状态只能由pending状态转化，相互不能转化。如图

pending状态下的promise在处理完业务逻辑，且能正常退出时便可以执行resolve方法，从而进入fulfilled状态；
若pending状态下的promise在处理业务逻辑的过程中出现异常错误，或者主动调用reject方法，则进入rejected状态。

let pro = new Promise(function(resolve, reject){
    if(// 逻辑处理完毕且能正常退出){
        resolve()
    }
    else{
        // 异常错误抛出
        reject()
    }
})

pro.then(function(res){
    // 如果promise对象调用了resolve方法，则进入该函数逻辑
}, function(err){
    // 如果promise对象调用了reject方法，则进入该函数逻辑
})

链式调用

因为promise对象中的then方法的返回值是一个新的promise对象，因此可以实现链式调用。但后一个then方法的执行必须等待前一个then方法返回的promise对象状态转为fulfilled或者rejected，若promise对象处于pending状态下，则后一个then方法只能等待。

pro.then(function(res){
    // 第一个promise对象逻辑执行
    return newPro;// 返回一个新promise
}).then(function(res){
    // 对newPro这个对象进行处理
})
// ...可以一直链式调用下去

异常捕捉

promise中的catch方法其实就是pro.then(null, rejection)，用户捕捉代码运行中的错误异常。

pro.then(function(res){
    // 逻辑处理，但存在异常
}).catch(function(err){
    // 捕捉上一个then函数中所出现的异常错误
})

此外，catch方法的所捕捉的异常不仅仅局限于上一个then方法内，而是可以把错误一直传递下来，直至遇到的第一个catch，然后被捕捉。如链式调用中：

pro.then(function(res){
    // 逻辑处理，但存在异常
}).then({
    // 逻辑处理
}).catch(function(err){
    // 捕捉上面第一个出现异常的then函数中所出现的错误
})

promise.all

promise.all方法可以接受一个由promise组成的数组作为参数，包装成一个新的promise对象，并且按照数组中promise的顺序进行异步执行。如：

let pro1 = new Promise(function(resolve, reject){})；
let pro2 = new Promise(function(resolve, reject){})；
let pro3 = new Promise(function(resolve, reject){})；

let proAll = promise.all([pro1, pro2, pro3]);

proAll的状态由pro1，pro2，pro3三者共同决定：
①pending: 处理中，pro1，pro2，pro3中无rejected且存在pending状态。
②rejected: pro1，pro2，pro3中存在一个rejected。
③fulfilled：pro1，pro2，pro3三者均为fulfilled。

当proAll的状态为fulfilled时，会返回一个数组，该数组中的元素则是上面由promise组成的数组相对应执行后的结果。

promise.race

promise.race所接受的参数与promise.all一致，但promise.race的返回值则是由pro1，pro2，pro3三者中最先完成的promise对象决定，并且返回值为该最早完成的promise对象的返回值。

let proAll = promise.race([pro1, pro2, pro3]);

promise.resolve

promise.resolve方法能将一个对象转换成promise对象

let newPro = promise.resolve(obj);

①若obj不具有then方法，则newPro直接变为fulfilled状态

let newPro = promise.resolve('i am not a promise');

newPro.then(function(str){
    console.log(str) // 输出 i am not a promise
})

②如果obj本就是一个Promise对象，则promise.resolve会将obj直接返回。

promise.reject

promise.reject方法与promise.resolve一样，能将一个对象转换成promise对象，但返回的promise对象的状态为rejected。

async/await

async是关键词，在一个函数名之前加上该关键词，表明该函数内部有异步操作，而这异步操作应该返回一个promise对象，并且在这异步操作之前添加await关键词。当函数执行的时候，遇到await则会先进行Promise的逻辑处理，带promise的状态不再为pending时再执行该函数后面的语句。

let pro = new Promise(function(resolve, reject){
    // 异步处理逻辑
    resolve();
})

async function asyncFunc(){
    // 正常执行的语句
    await pro;
    // 等待promise处理完之后再执行的语句
}

asyncFunc();

总结

promise的出现，为我们编写异步函数定下不少规则，在优化我们代码的同时也能减少代码量，并增强可读性，但也需严格遵守promise/A+的规范进行promise的开发。

Promise入门之基本用法