1.javascript的单线程特性

在javascript中,所有的代码都是单线程的

因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调。

function callback() {
console.log('hello')
}
console.log('begin')
setTimeout(callback, 1000)
console.log('end')

运行结果:

begin end hello

2.Promise对象

像上列,和ajax等,承诺会在将来执行的对象,统称为Promise对象。

Promise对象是ES6引入的,由浏览器来支持。

function test(resolve, reject) {
var timeOut = Math.random()*2
console.log('timeOut '+timeOut)
setTimeout(function () {
if(timeOut<1){
console.log('call resolve1()')
resolve('200')
}
else{
console.log('call reject()')
reject('timeOut')
}
},timeOut*1000)
}
var p1 = new Promise(test)
var p2 = p1.then(function (result) {
console.log('成功'+result)
})
var p3 = p2.catch(function (result) {
console.log('失败'+result)
})

test是异步执行函数,由两个参数resolve,reject,执行成功调用resolve,执行失败调用reject

我们不关心resole,reject具体是怎么执行的。

new Promise(test)用来执行异步函数,并在将来某一时刻获取执行成功,或失败的结果

test函数执行成功,通过Promise对象

p1.then(function (result) {

console.log('成功'+result)

})

test函数执行失败,通知Promise对象

p2.catch(function (reason) {

console.log('失败:' + reason);

});

可以将上述代码串联起来:

new Promise(test).then(function (result) {
console.log('成功:' + result);
}).catch(function (reason) {
console.log('失败:' + reason);
});

3.ajax改写

function ajax(method, url, data) {
var request = new XMLHttpRequest();
return new Promise(function (resolve, reject) {
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
resolve(request.responseText);
} else {
reject(request.status);
}
}
};
request.open(method, url);
request.send(data);
});
}
var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功,获得响应内容
log.innerText = text;
}).catch(function (status) { // 如果AJAX失败,获得响应代码
log.innerText = 'ERROR: ' + status;
});

4.串行执行异步任务

job1.then(job2).then(job3).catch(handleError);

job1,job2,job3都是Promise对象

5.并行执行异步任务

多任务都执行完毕后,执行成功回调

var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2,并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // 获得一个Array: ['P1', 'P2']
});

多任务只要有一个执行完毕,执行成功回调

var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});

javascript基础拾遗(十二)的更多相关文章

  1. javascript基础拾遗(十)

    1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  4. Java基础拾遗(二)

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/76358523冷血之心的博客) 马上就要秋招了,新的一轮笔试面试马上 ...

  5. Java 多线程基础(十二)生产者与消费者

    Java 多线程基础(十二)生产者与消费者 一.生产者与消费者模型 生产者与消费者问题是个非常典型的多线程问题,涉及到的对象包括“生产者”.“消费者”.“仓库”和“产品”.他们之间的关系如下: ①.生 ...

  6. Python3基础(十二) 学习总结·附PDF

    Python是一门强大的解释型.面向对象的高级程序设计语言,它优雅.简单.可移植.易扩展,可用于桌面应用.系统编程.数据库编程.网络编程.web开发.图像处理.人工智能.数学应用.文本处理等等. 在学 ...

  7. How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性

    个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...

  8. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  9. JavaScript 基础 学习 (二)

    JavaScript 基础 学习 节点属性 ​ 每一个节点都有自己的特点 ​ 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) ​ 语法:节点.nodeT ...

随机推荐

  1. TL Cop

    第一讲 研发技术型人才的特点 一.为何要重视技术与研发技术管理 1.中国技术型企业近十年的发展路线图以及经验教训 2.技术还是营销:中国企业的痛 3.名家论技术与研发技术管理 二.研发技术人才的特点 ...

  2. Dubbo创建提供者&消费者工程

    1. 前言 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spring的Schema扩展进行加载.如果不想使 ...

  3. ios发布

    https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Gu ...

  4. JavaScript Math Object 数字

    JavaScript Math Object Math Object The Math object allows you to perform mathematical tasks. Math is ...

  5. Ubuntu菜鸟入门(十五)—— 安装aras2下载软件

    一.安装arias2 sudo add-apt-repository ppa:t-tujikawa/ppa sudo apt-get update sudo apt-get install aria2 ...

  6. 【Oracle 】pctfree和pctused详解

    一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...

  7. 【Oracle】Oracle约束的总结

    你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...

  8. shell脚本监控cpu/内存使用率 转

    该脚本检测cpu和内存的使用情况,只需要调整memorySetting.cpuSetting.userEmail要发邮件报警的email地址即可 如果没有配置发邮件参数的哥们,已配置了的,直接飞到代码 ...

  9. cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法

    cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法 问题描述 当启动了cassandra之 ...

  10. Elasticsearch初探(一)

    一.安装(Linux篇) 现在的开源软件越来越成熟,都打好包了,下载后直接解压就可以测试了. curl -L -O https://artifacts.elastic.co/downloads/ela ...