ES6之Promise

前言

Promise，用于解决回调地域带来的问题，将异步操作以同步的操作编程表达出来，避免了层层嵌套的回调函数。

什么是 Promise

所谓的 promise，简单的来说就是一个容器，里面保存着某个未来才会结束的事件(也就是我们的异步操作)的结果。从语法上面来说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise特性

promise 对象代表一个异步操作，有三种状态:pending、fulfilled、reject

任何其他状态都无法改变这个状态。这也是 Promise 这个名字的由来。'承诺'表示其他手段无法改变它的状态。

Promise 的出现解决什么问题

promise其实就是一个异步编程方案,在 promise 出现之前总会遇到所谓的'回掉地域'的嵌套代码

    step(1, function() {
        step(2, function() {
            step(3, function() {
                ……….
            })
        })
    })

都知道这种"回调地狱",是一种很让人恼火的代码书写格式，嵌套多层之后会让人阅读起来怀疑人生的。但是这种"回调地狱"真的就只有格式的问题嘛？显然不是。

引用例子

一个来自《YDKjs》的例子：一个程序员开发了一个付款的系统，它良好的运行了很长时间。突然有一天，一个客户在付款的时候信用卡被连续刷了五次。这名程序员在调查了以后发现，一个第三方的工具库因为某些原因把付款回调执行了五次。在与第三方团队沟通之后问题得到了解决。

上面的例子就是一个 信任问题 回调函数的方式会引发很多信任问题，例如重复调用,调用太晚等等问题。那么promise怎么解决上述两个问题的呢？

Promise意义

可读性 首先是 Promise 的 then 方法，支持我们在回调写在 then 方法中，让我们在日常开发中可以很清楚的看到，比如上面的代码就可以改写成

     Promise.resolve(1).
     .then(step => ++setp)
     .then(step => ++setp)
     .then(step => ++setp)
 ...

Promise 承诺的严谨性 它与普通的回调方式的区别在于

普通方式，回调成功之后的操作直接写在了回调函数里面，而这些操作的调用是由第三方控制

Promise方式 回调只负责成功之后的通知，而回调成功之后的操作放在 then 的回调函数里面，由 Promise 精确控制。

注意 Promise 的状态不可逆。一旦发生改变就没有办法改变成任何一种状态。Promise 只能是异步的，所以不会出现异步的同步调用。

Promise缺点

无法取消 Promise 一旦新建它就会立即执行，无法中途取消

如果不设置回调函数，Promise 内部抛出的错误不会反应到外部。

当处于 pending 状态，无法得知目前进行到哪一阶段(刚开始还是快结束)

广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com

如何使用Promise

Promise 对象是一个构造函数，用来生成 Promise 实例

Promise 构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject，这两个参数也函数，由 JavaScript 提供，不需要自己添加

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。但一般不建议给then加两个参数，建议使用.then完成resolved状态的操作，使用.catch完成rejected的操作。 像这样：

    const promise = new Promise( (resolve,reject) => {
        resolve('ok');
        reject('error')
    })
    promise.then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

还可以用promise实现ajax的操作：

const getjsON = function(url){
        const promise = new Promise((resolve,reject) => {
            const handler = function(){
                if(this.readyState !== 4){//这两个if语句主要用来判断请求是否成功
                    return;
                };
                if(this.status === 200){
                    resolve(this.response)//这是成功请求后，将返回的数据传到回调函数中
                }else{
                    reject(new Error(this.statusText))//这是失败后，将原因返给catch
                }
            };
            const xmlHttp = new XMLHttpRequest();//声明一个XMLHttpRequest对象的实例
            xmlHttp.open("get", url);//设置要发送的方法和地址
            xmlHttp.onreadystatechange = handler;//在这里调用上面定义的handler
            xmlHttp.responseType = "json";
            xmlHttp.setRequestHeader("Accept", "application/json");//设置请求头，规定接受json类型的数据
            xmlHttp.send();//真正的发送请求
        });
        return promise;
    };
    getJSON("url").then( res => {
        //成功后的操作
    }).catch(err => {
        //失败后的提示
    })

Promise可以嵌套使用，就是将一个Promise实例作为另一个Promise实例的resolve方法的参数传入。

说说then方法，这个方法是定义在Promise的原型上的，then方法返回的是一个新的Promise实例，因此可以采用链式写法，即then方法后面调用另一个then方法。

再来说几个Promise常用的api吧！

Promise.prototype.finally():

Finally方法用于不管promise对象的最后状态如何，都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.resolve（）：

这个方法用来将参数转变成Promise对象

参数是一个Promise实例：不改动

参数是一个thenable对象：会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。

参数不是具有then方法的对象，或根本就不是对象：返回一个新的Promise对象，状态为resolved

不带有任何参数：直接返回一个ersolved状态的Promise对象

Promise.reject（） Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

Promise.all()：

const p = Promise.all([p1, p2, p3]);

用于将多个Promise实例，包装成一个新的Promise实例。这个方法接收一个数组作为参数，且都是Promise实例，如果不是，就会先调用Promise.resolve方法。 注意： 只有当数组中的实例的状态都是fulfilled，p才会变成fulfilled，此时，p1,p2,p3的返回值组成一个数组，传递给p的回调函数。 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race()： 和all方法类似，也是讲多个Promise实例包装成一个。 但不一样的是，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

在实际开发中，我们总希望让同步函数同步执行，异步函数异步执行，但如果同步函数想用Promise来做处理，能否实现同步呢？答案是肯定的。 这就要说到**Promise.try（）**方法了

const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now// next