Promise

1. 简介

由于JS是单线程的，遇到耗时任务时，为防止代码阻塞，都需要异步处理该任务。比如ajax网络请求，定时器…

1.1 传统解决方式: 回调函数

console.log('start');
setTimeout(function(){
    console.log('hello bf!!!')
},0)
console.log('end');
// 定时器就是一个需要异步处理的任务,我们以回调函数的形式,指定计时完成后要做的事情
// 文档的事件操作,也都是这样的处理方式

1.2 Promise解决方式

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

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

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

2. 基本用法

2.1 创建promise实例

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

var p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        var num=Math.ceil(Math.random()*10);
        if(num>5){
            resolve(num);
        }else{
            reject(num);
        }
    },500)
})

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

2.2 then()方法

Promise实例生成以后，可以用then方法分别指定当promise实例变为resolved状态和rejected状态的回调函数。

//处理结果的第一种方式
//处理结果
p.then(function(res){
    console.log("res",res);
},function(err){
    console.log("err",err);
})

//写成箭头函数会更加简便

p.then(res=>{
    console.log("res",res);
},err=>{
    console.log("err",err);
})

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

2.3 catch()方法

上面的处理结果还可以这样写:

//处理结果的第2种方式
p.then(res=>{
    console.log("res",res);
}).catch(err=>{
    console.log("err",err);
})

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

例如:

const promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});
promise.catch(function(error) {
  console.log(error);
});
// Error: test

//reject()方法的作用，也等同于抛出错误
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

如果 Promise 状态已经变成resolved，再抛出错误是无效的。Promise 在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了。

例如:

const promise = new Promise(function(resolve, reject) {
  resolve('ok');
  throw new Error('test');
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。 推荐使用catch方法。

2.4 Promise 新建后就会立即执行

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。

2.5 Promise对象有以下两个特点

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

3. promise的链式编程

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的。

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

var status = 1,isLogin=false;
var login = (resolve , reject)=>{
    setTimeout(()=>{
        if(status == 1){
            isLogin = true
            resolve({
                code : 1,
                token:"ad31nu891nv",
                msg:"登陆成功!"
            })
        }else{
            isLogin = false
            reject("失败")
        }
    },2000)
};
var getInfo = (resolve , reject)=>{
    setTimeout(()=>{
        if(isLogin){
            resolve("获取用户信息成功!")
        }else{
            reject("获取失败")
        }
    },1000)
};
new Promise(login)
.then(res =>{
    console.log(res);
    return new Promise(getInfo);
})
.then(res =>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。