es6的异步编程之Promise

  现在在前端，JavaScript已经变得越来越规范化和标准化了。比如说之前比较混乱的定义变量的方式已经有了const和let两者官方比较推荐的方式；以及处理完函数以后回调的方式也有了Promise以及async等方法。大家在当前比较推荐的mvvm框架（比如说vue）中还是比较喜欢用Promise，确实它比较简单实用。

        大家都知道，promise有三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），很多人不知道，这些状态我们不能够改变，但是，我们能够改变返回的值。换句话说，我们能够自己设定Promise构造函数中的resolve（也就是fulfilled状态的写法）和reject（也就是rejected）。

          基本用法  

let promise = new Promise (function (relove, reject) {// ... some code

    if (true){//异步方式正确，或者朝着理想方式走

      resolve(value);

    } else {

      reject(error);

    }

});

这里需要说明一下的是Promise接受的必须是一个函数，而该函数里边的两个参数也是参数，固定死两个函数的。参数的位置就是表示前一个为成功，后一个代表失败。

我们平时做图片延迟加载的时候，或者异步加载的时候，用Promise，就会感觉倍儿棒！看下面的代码：

function imageLoadAnsyc(url) {

    return new Promise(function(resolve, reject) {

        let image = new Image();

        image.onload = function() {

        resolve(image);

    };

    image.onerror = function() {

        reject(new Error('Could not load image at ' + url));

    };

    image.src = url;

});}

该方法表示，如果图片加载成功（onload），那么就将image作为成功函数的参数返回出去，那么这个时候就可以利用imageLoadAnsyc的异步then进行操作了；同理，如果加载失败，显然就要new一个Error，异步catch中做回调操作即可。

代码可以如下表示：

imageLoadAnsyc(url).then(function(value){ 

  //success 

},function(error){ 

 //failure 

});

举例说明

let myFirstPromise = new Promise((resolve, reject) => {

// We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.

// In this example, we use setTimeout(...) to simulate async code.

// In reality, you will probably be using something like XHR or an HTML5 API.

setTimeout(function(){

resolve("Success!"); // Yay! Everything went well!

}, 250);

});

myFirstPromise.then((successMessage) => {

// successMessage is whatever we passed in the resolve(...) function above.

// It doesn't have to be a string, but if it is only a succeed message, it probably will be.

console.log("Yay! " + successMessage);

});

上面的例子，利用Promise的机制，在Promise构造函数的内部进行setTimeout的延迟操作，延迟的时间250ms以后，控制台弹出“Yay！Success！”表明，then里边的处理方法只能是myFirstPromise操作以后才会触发，而且这个操作必须是能够启动resolve。

其实我们可以这样写：

const myFirstPromise = function(timeVal){

    return new Promise((resolve, reject) => {

        // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.

        // In this example, we use setTimeout(...) to simulate async code.

        // In reality, you will probably be using something like XHR or an HTML5 API.

        if(timeVal<1000){

               setTimeout(function(){

                    resolve("Success!"); // Yay! Everything went well!

                }, 250);

        }else{//timeout

                reject(new Error('It is timeout, please try again.'));

        }

    });

}

myFirstPromise(300).then((successMessage) => {

    // successMessage is whatever we passed in the resolve(...) function above.

    // It doesn't have to be a string, but if it is only a succeed message, it probably will be.

    console.log("Yay! " + successMessage);

}).catch(function(error){

    console.log("发生错误 " +error);

})；

这样一来我们就很容易将Promise的常见用法掌握手上。首先，将Promise构造的函数用 myFirstPromise 包裹着，然后再将需要传入的时间用参数传进去，之后再去判断。

其实到了这一步，我们就基本上掌握了Promise的基本的用法。