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

news/2023/12/1 7:16:22

异步编程是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方法。


最后

没有最后

图片描述


http://www.niftyadmin.cn/n/2569235.html

相关文章

thinkphp数据库连接

https://www.kancloud.cn/manual/thinkphp5/118059 一、配置文件定义 常用的配置方式是在应用目录或者模块目录下面的database.php中添加下面的配置参数: return [// 数据库类型type > mysql,// 数据库连接DSN配置dsn > ,// 服务器地址hostnam…

linux查看so文件导出函数

nm -D 7z.so objdump -tT 7z.so 转载于:https://www.cnblogs.com/Dennis-mi/articles/6726171.html

--defaults-file 不能用?

今天在测试mysql多实例时发现mysqld_safe --user --defaults-file 怎么都无法启动,后来发现是必须按顺序,先写--defaults-file才可以。 mysqld_safe 启动时首先会读取my.cnf。 按默认顺序/etc/my.cnf /etc/mysql/my.cnf /usr/local/mysql/etc/my.cnf ~/.…

Spark学习笔记——读写Hbase

1.首先在Hbase中建立一张表,名字为student 参考 Hbase学习笔记——基本CRUD操作 一个cell的值,取决于Row,Column family,Column Qualifier和Timestamp Hbase表结构 2.往Hbase中写入数据,写入的时候,需要写family和column build.sbt libraryDe…

SharePoint 2013 APP

SharePoint 2013 带来了全新的APP 构架模型,以前的列表和文档库等等,现在统称为APP。 对于我们开发的APP,其实并没有运行在托管这个APP的SharePoint网站里面,而是运行在另外一个新的网站里,下面是一个典型的APP的URL&a…

js根据秒显示时分秒倒计时

2019独角兽企业重金招聘Python工程师标准>>> var globalSecound 0 , mintue 61 , clearId ;function mintueCoverSecound(mintue){return mintue * 60; }globalSecound mintueCoverSecound(mintue);function secoundCoverMinute(){globalSecound --;var hours …

Eclipse 找不到Server选项

一般的eclipse当然没有了,如果是j2ee版,或者装了web插件,或者是myeclipse的话才有这个选项 SDK 的 Eclipse 版本没有 Server 选项的,得下载 Java EE 版本的 Eclipse 转自http://blog.csdn.net/wugangsunny/article/details/252465…

由SQL Server的job出错调查引起的思考

最近一段时间数据库上的一个Job频繁报错,刚开始我们没有抽时间进行彻底的调查。只是处理了下不规范的数据就没有管了,但是后面我们发现过了几天它又报错了。今天我进行了彻底的调查,发现是由于2个表的列的长度不一致引起的。由于产品和产品品…

mongodb简单安装

参考文档: http://www.cnblogs.com/hanyinglong/archive/2016/07/21/5690611.html conf文件: dbpath /usr/local/mongodb/db logpath /usr/local/mongodb/logs/mongodb.log port 27017 fork true logappend true pidfilepath /usr/local/mongodb/m…

python 特色语法_Python入门,从这10个语法开始

Python简单易学,但又博大精深。许多人号称精通Python,却不会写Pythonic的代码,对很多常用包的使用也并不熟悉。学海无涯,我们先来了解一些Python中最基本的内容。Python的特点解释型语言,无需编译即可运行提供了交互式…

Spring IOC 练习

练习题实验一实验二实验三3.1使用构造器在IOC中创建bean3.2通过p名称空间为bean赋值实验四TOC 练习题 实验一 通过IOC容器创建对象&#xff0c;并为属性赋值 ico.xml <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.sprin…

项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省市县 三级联动 下拉框选择 摘要 因项目需要&#xff0c;写了一个省市县三级联动下拉框&#xff0c;省市县数据由mysql数据库调用&#xf…

python和财务管理的区别与联系_财务会计、财务管理和管理会计有什么区别和联系?...

作者笔名&#xff1a;张三水&#xff0c;超过20年国企内部管理会计从业&#xff0c;从出纳&#xff0c;核算到内帐总管&#xff0c;CFO公司监事&#xff0c;目前仍在学习&#xff0c;与CEO和新兴企业管理者 以财务分析的基本功&#xff0c;和对应新准则&#xff0c;新打法&…

药物数据库

参考文献&#xff1a; 基于因特网的常用化合物活性数据库简介 药物靶点数据库的应用进展_庞晓丛_刘艾林_杜冠华 1、Chembl数据库&#xff1a; Chembl数据库是欧洲生物信息研究所&#xff08;European Bioinformatics Institute&#xff0c;EBI&#xff09;开发的一个在线的免费…

freemarker写select组件报错总结(四)

1、错误描写叙述 <html><head><meta http-equiv"content-type" content"text/html; charsetUTF-8"><title>freemarker 下拉框</title></head><body>Error parsing imported template inc/select.ftl The proble…

路由器的基本功能

一是实现基本的互联网协议&#xff0c;包括IP、ICMP以及其它相关的协议。 二是对每个所连接的网络&#xff0c;路由器必须实现该网络所要求的功能。这些功能通 常包括&#xff1a;IP数据包的封装/解封装。根据该网络所支持的最大数据包大小发送或接收IP数据包。该最大数据包大小…
最新文章