Promise快速入门

周五就想写这篇文章，可是无奈花花世界的诱惑太多……就一直拖到了今天，自责1e4遍;
进入正题Promise:

Promise 对象用于表示一个异步操做的最终状态（完成或失败），以及其返回的值。

上为MDNPromise的定义；
ES6规定Promise是一个构造函数，用来生成Promise实例（就是跟new一个女友同样）；
Promise意为‘承诺’，承诺是发生在将来且必须达成的事，对应Promise对象是一个保存着将来才会结束的异步操做的“容器”；

Promise对象表明的异步操做有三个状态：

• pending （进行中）
• fulfilled (已成功)
• rejected (已失败)

Promise对象有一下两个特色：

• 上述的三个状态一经改变则不会更改且任什么时候候均可以获得这个结果
• 只有异步操做的结果能够决定当前状态的变化，其余任何操做都不改变Promise对象的状态，即承诺这个词的由来，也表现了程序猿的浪漫~~

先说说基本用法而后再来实操~

const promise = new Promise(function(resolve, reject) {
  // ... some code 当即执行

  if (/* 异步操做成功 */){
    resolve(value);// 将状态改成fulfilled 并将参数传递给then中的回调函数
  } else {
    reject(error);// 将状态改成rejected 并将参数传递给then/catch中的回调函数
  }
});
// then方法接受两个参数分别对应两个状态的处理，其中对应rejected的参数可选，两个参数都接受上面promise对象传出的参数做为参数
promise.then(function(value) {
  // success 成功处理
}, function(error) {
  // failure 错误处理
});

了解了基本用法咱们来了解一下Promise到底有啥用啊，个人理解就是以同步的方式（链式调用）去处理异步操做（回调），在这个Promise对象出现以前咱们是怎么处理异步操做的呢？
举个栗子~：

console.log('start');
setTimeout(function (name) {
          var fruitList = name + ',';

          setTimeout(function (name) {
            fruitList += name + ',';

            setTimeout(function (name) {
              fruitList += name + ',';

              setTimeout(function (name) {
                fruitList += name + ',';

                setTimeout(function (name) {
                  fruitList += name;

                  console.log(fruitList);

                }, 1, '西瓜');

              }, 1, '香蕉');

            }, 1, '橘子');

          }, 1, '苹果');}, 1, '葡萄');
          
          console.log('上面是个异步过程，因此我先出来，后面才是水果');

我这里只是简单的写了几层简单的定时器而已，若是要不少不少层而且稍微复杂一点的回调函数就很难以维护了且代码阅读很难受。因此Promise的出现就是为了链式的调用来实现这种异步操做一样以本例改成Promise的方式来一遍~：

console.log('start');
var promise1 = new Promise((resolve,reject)=>{
              setTimeout(resolve('葡萄'),1);
          });
promise1.then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+',苹果'),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+',橘子'),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+',香蕉'),1)))
        .then(value=>new Promise((resolve,reject)=>setTimeout(resolve(value+',西瓜'),1)))
        .then(value=>{console.log(value)});

console.log('上面是个异步过程，因此我先出来，后面才是水果');

其实本例中的reject参数能够省略，由于我默认他确定会成功的了，额还有就是写function比较麻烦这里直接用了箭头函数~~恩……在科普一个小坑给大家，若是在vue中使用promise用箭头函数要比写function舒服不少，function中this指向的是window而不是vue实例~

再来看看下面这个抛出错误的相关栗子：

console.log("start");
        new Promise((resolve, reject) => {
            var data = [1,2,3,4,5,6,7];
            return resolve(data);
        })
        .then((result) => {
            var newResult = result.slice(1);   
            return newResult;
        })
        .then((result)=>{
            console.log(result);
            throw new Error('someting error');
        })
        .catch((value)=>{
            console.log(value);// 抛出错误以后 执行catch操做 接受的参数是抛出的错误，其实.catch只是Promise.then(reject)的别名而已
        })
        .then((value) => {
            console.log(value);// undefined 抛出错误后没有 return 因此这里是个undefined
            console.log('我任性，错了以后仍要执行');// catch以后仍然能够继续执行then操做 
        });

注释上写的很清楚咯~~

接下来在来个实际点的用法异步加载图片（原谅我实际上是从阮一峰老师那里偷来的栗子吃）：

function loadImageAsync(url){
        return new Promise((resolve,reject)=>{
        var image = new Image();
        image.onload = function(){
            resolve(image);
        }
        image.onerror = function(){
            reject(new Error('不能加载图片,url是'+ url));
        }
        image.src = url;
    });
}
loadImageAsync('QQ图片20171114220539.png').then(value =>{
    console.log(value);
    document.body.append(value);
});

因为最近确实是忙得头昏脑胀，就先简单的分享一波基础用法，剩下的关于promise的两种模式Promise.all()和Promise.race()等我改天再加或者另发一篇吧
一样你也能够去这里学习了解一下：http://es6.ruanyifeng.com/#do...