ES6-Promise用法

romise是一个异步操作，分为三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled ）和Rejected（已失败）。

特点：

一旦状态改变，就不会再变，任何时候都可以得到这个结果。 与事件（ Event ）的区别：事件错过了的话再去监听，是得不到结果的。

缺点：

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

用法：

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

//Promise 实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
var promise = new Promise((resolve,reject)=>{
  // ... 
}).then(res=>{
     //成功
     resolve(res);
  }, err=>{
    //失败
     reject(err);
  })

resolve函数表示状态从 “ 未完成 ” 变为 “ 成功 ” ，在异步操作成功时调用，并将异步操作的结果作为参数传递出去。 reject函数表示状态从 “ 未完成 ” 变为 “ 失败 ”，在异步操作失败时调用，并将异步操作的错误作为参数传递出去。

例子：

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

import axios from 'axios';
import qs from 'qs';
let instance = axios.create({
  baseURL: '',  // 基础url前缀
  timeout: 10000 
});
function fetchApi(url){
  return new Promise((resolve,reject)=>{
    let param = {
      //...
    }
    let config = {
       headers: {'Content-Type': "multipart/form-data"}
    };
    instance.post(url, qs.stringify(param), config)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
function login() {
    return fetchApi('/login')
}
login();

jquery ajax访问后台接口获取数据：

$.ajax({
  type: 'post',
  url: '/login',
  data: {
      //传递到后台的参数 没有则不写
      user_name: name,
      password: password
  },
  dataType: 'json',
  success(res) {
      if(res.msgCode == 0){
          //alert('登录成功!');
          window.location.href = '/';
      }else{
          alert("错误码：" + res.msgCode + "，" + res.msg);
          window.location.href = '/';
      }
  },
  error(err) {
      alert('登录失败!错误信息：'+ err);
      return;
  }
});
```  

原生ajax范文后台接口获取数据：
```js
var XHR=null;  
var url = ''; 
if (window.XMLHttpRequest) {  
    // 非IE内核  
    XHR = new XMLHttpRequest();  
} else if (window.ActiveXObject) {  
    // IE内核,这里早期IE的版本写法不同,具体可以查询下  
    XHR = new ActiveXObject("Microsoft.XMLHTTP");  
} else {  
    XHR = null;  
}  
if(XHR){  
    XHR.open("GET", url);  
    XHR.onreadystatechange = function () {  
        // readyState值说明  
        // 0,初始化,XHR对象已经创建,还未执行open  
        // 1,载入,已经调用open方法,但是还没发送请求  
        // 2,载入完成,请求已经发送完成  
        // 3,交互,可以接收到部分数据  
        if (XHR.readyState == 4 && XHR.status == 200) {  
            // 这里可以对返回的内容做处理  
            // 一般会返回JSON或XML数据格式  
            console.log(XHR.responseText);  
            // 主动释放,JS本身也会回收的  
            XHR = null;  
        }  
    };  
    XHR.send();  
}  

方法：

Promise.prototype.then()

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

login(param).then(function(post) {
   return param;
   }).then(res=> {
      console.log("Resolved: ", res);
   }, err=>{
      console.log("Rejected: ", err);
});

第二个then方法指定的回调函数会等待这个新的 Promise 对象状态发生变化。如果变为 Resolved打印res，如果状态变为 Rejected打印err。

Promise.prototype.catch()

1.如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误。 2.then方法指定的回调函数如果运行中抛出错误，也会被catch方法捕获。 3.Promise 对象的错误具有 “ 冒泡 ” 性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。 4.reject方法的作用，等同于抛出错误

var promise = new Promise((resolve, reject)=> {
try {
  throw new Error('test');
} catch(err) {
  reject(err);
}
});
// 等同于
var promise = new Promise((resolve, reject)=> {
  reject(new Error('test'));
});

Promise.all()

接受一个数组作为参数,用于将多个 Promise 实例，包装成一个新的 Promise 实例。

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

p的状态由p1、p2、p3决定: 1.只有p1、p2、p3的状态都变成已完成，p的状态才会变成已完成，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。 2.只要p1、p2、p3之中有一个被拒绝，p的状态就变成拒绝，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race()

同样是将多个 Promise 实例，包装成一个新的 Promise 实例 区别：哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

var p = Promise.race([p1,p2,p3]);

Promise.resolve()

将现有对象转为 Promise 对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()

返回一个新的 Promise 实例，该实例的状态为rejected。

var p = Promise.reject(' 出错了 ');
// 等同于
var p = new Promise((resolve, reject) => reject(' 出错了 '))
p.then(null, function (s){
  console.log(s)
});