ECMAScript6入门(五)--异步编程核心Promise

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ECMAScript6入门(五)--异步编程核心Promise脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

异步编程是Javascript的特性之一,正是因为这种特性,才使得我们在浏览网页的时候,即使同时加载非常多的文件图片,也能保证速度的流畅。异步编程算是弥补了JS作为单线程语言的不足。


是什么

传统的异步编程主要是通过回调函数和事件来实现的,通常我们见到的回调陷阱就是通过这种方式实现的;而ES6提出的Promise是 异步编程的另一种解决方案,给我们提供了以同步的方式解决异步需求的选择。

所谓Promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

特性

一个Promise对象代表一个异步操作,Promise有三种状态:PEnding(进行中)Resolved(完成)Rejected(失败)

Promise只有两种状态的转变方式,从Pending变为Resolved和从Pending变为Rejected,状态一旦转变,将会被固定,不再变化。

PRomise一旦被初始化就不能被中途取消了,另外当处于Pending状态时,不能更具体的区分状态。


如何用

我们先来看一个标准的Promise实例

VAR promise = new Promise(function(resolve, reject){
    //do something
    
    if(/*操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
});

Promise实例化之后,可以用then方法指定Resolved状态和Reject状态的回调函数。

promise.then(function(value) {
    //成功
}, function(error) {
    //失败
}
举个栗子

我们用Promise实现一个异步加载图片的例子。

function asyncLoadImage(url) {
    return new Promise(function(resolve, reject){
        //初始化图片对象
        var image = new Image();
        //加载成功
        image.onload = function(){
            resolve(image);
        };
        //加载失败
        image.onerror = function(){
            reject("图片加载失败!");
        };
        
        image.src = url;
    });
}
//实际应用
asyncLoadImage("index.jpg").then(function(value){
    console.LOG(value.src);
}, function(error){
    console.log(error);
}

我们使用then()Promise对象添加成功和失败的操作。

注意如果采用以下写法是不可行的。

function asyncLoadImage(url, resolve, reject) {
    return new Promise(function(resolve, reject){
        //....
     });
}

因为必须要通过then(),才能将方法添加到Promise中。

再举个栗子

我们前端开发过程中,最常用的数据交互方式就是AjaxAjax就是事件驱动的异步编程,我们现在用Promise来实现一个Ajax操作。

var post = function(option) {
  var promise = new Promise(function(resolve, reject){
    var client = new XMLHttpRequest();
    client.open("POST", option.url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send(option.data);

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });

  return promise;
};

post({
    url: 'www.lingxiao.sITe/es6/post',
    data: json,
}).then(function(result){
    console.log(result);
},function(error){
    console.log("Error:"+error);
});

这样我们就实现了一个简单的Ajax方法。


最后

没有最后

ECMAScript6入门(五)--异步编程核心Promise

脚本宝典总结

以上是脚本宝典为你收集整理的ECMAScript6入门(五)--异步编程核心Promise全部内容,希望文章能够帮你解决ECMAScript6入门(五)--异步编程核心Promise所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。