javascript基础拾遗(十二)
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基础拾遗(十二)的更多相关文章
- javascript基础拾遗(十)
1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Java基础拾遗(二)
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/76358523冷血之心的博客) 马上就要秋招了,新的一轮笔试面试马上 ...
- Java 多线程基础(十二)生产者与消费者
Java 多线程基础(十二)生产者与消费者 一.生产者与消费者模型 生产者与消费者问题是个非常典型的多线程问题,涉及到的对象包括“生产者”.“消费者”.“仓库”和“产品”.他们之间的关系如下: ①.生 ...
- Python3基础(十二) 学习总结·附PDF
Python是一门强大的解释型.面向对象的高级程序设计语言,它优雅.简单.可移植.易扩展,可用于桌面应用.系统编程.数据库编程.网络编程.web开发.图像处理.人工智能.数学应用.文本处理等等. 在学 ...
- How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性
个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript 基础 学习 (二)
JavaScript 基础 学习 节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法:节点.nodeT ...
随机推荐
- TL Cop
第一讲 研发技术型人才的特点 一.为何要重视技术与研发技术管理 1.中国技术型企业近十年的发展路线图以及经验教训 2.技术还是营销:中国企业的痛 3.名家论技术与研发技术管理 二.研发技术人才的特点 ...
- Dubbo创建提供者&消费者工程
1. 前言 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spring的Schema扩展进行加载.如果不想使 ...
- ios发布
https://developer.apple.com/library/ios/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Gu ...
- JavaScript Math Object 数字
JavaScript Math Object Math Object The Math object allows you to perform mathematical tasks. Math is ...
- Ubuntu菜鸟入门(十五)—— 安装aras2下载软件
一.安装arias2 sudo add-apt-repository ppa:t-tujikawa/ppa sudo apt-get update sudo apt-get install aria2 ...
- 【Oracle 】pctfree和pctused详解
一.建立表时候,注意PCTFREE参数的作用 PCTFREE:为一个块保留的空间百分比,表示数据块在什么情况下可以被insert,默认是10,表示当数据块的可用空间低于10%后,就不可以被insert ...
- 【Oracle】Oracle约束的总结
你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...
- shell脚本监控cpu/内存使用率 转
该脚本检测cpu和内存的使用情况,只需要调整memorySetting.cpuSetting.userEmail要发邮件报警的email地址即可 如果没有配置发邮件参数的哥们,已配置了的,直接飞到代码 ...
- cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法
cassandra运行出现了Unable to gossip with any seeds,cqlsh链接不上,提示connection refused处理办法 问题描述 当启动了cassandra之 ...
- Elasticsearch初探(一)
一.安装(Linux篇) 现在的开源软件越来越成熟,都打好包了,下载后直接解压就可以测试了. curl -L -O https://artifacts.elastic.co/downloads/ela ...