ES6学习笔记(四):异步操作
Promise
Promise三种状态
pending、resolved、rejected
使用语法
var promis = new Promise(function(resolve,reject){
$.ajax({
url:'/api/something.json',
method:'get',
datatype:'json',
success:(res) =>{
resolve(res)
},
error:(err)=>{
reject(err)
}
})
})
promis.then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
Promise.prototype.then()
链式调用,状态变为resolve
如果把下一步想要的东西return出去,即可让下一个then使用
var promise = new Promise(function(resolve,reject){
$.ajax({
url:'/api/poisearch.json',
method:'get',
datatype:'json',
success:(res) =>{
resolve(res)
},
error:(err)=>{
reject(err)
}
})
})
promise.then(function(res){
return res.data
}).then(function(data){
return data.result;
}).then(function(result){
console.log(result)
});
上面的代码还可以借用箭头函数简写成,极大提升了代码的简洁性和可读性
promise.then(res => res.data)
.then(data => data.result)
.then(result => console.log(result));
Promise.prototype.catch()
如果异步操作抛出错误,状态就会变为Rejected,就会调用catch方法指定的回调函数,处理这个错误。
- 另外,then方法指定的回调函数,如果运行中抛出错误,也会被catch方法捕获。
- 如果Promise状态已经变成Resolved,再抛出错误是无效的。
- catch方法返回的还是一个Promise对象,因此后面还可以接着调用then方法。
Promise.all()
多个Promise实例,包装成1个,有点类似Array.prototype.every()
用法:
var p = Promise.all([p1, p2, p3]);
- 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
- 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
Promise.race()
多个Promise实例,包装成1个,有点类似Array.prototype.some()
- p1、p2、p3其中一个状态变成fulfilled,p的状态就会变成fulfilled
- 那个率先改变的Promise实例的返回值,就传递给p的回调函数。
done()、finally()
ES6学习笔记(四):异步操作的更多相关文章
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记四:Proxy与Reflect
一:Proxy 代理. ES6把代理模式做成了一个类,直接传入被代理对象.代理函数,即可创建一个代理对象,然后我们使用代理对象进行方法调用,即可调用被包装过的方法: 1)创建 var proxy = ...
- ES6学习笔记四(类和对象)
{ // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
随机推荐
- JAVA springmvc+spring+mybatis整合
一.springmvc---controller spring----service mybatiss---dao pring(包括springmvc).mybatis.mybatis-sprin ...
- strstr(),strchr()
strstr($a, $b)和strchr()一样,起的别名,表示查找$a中第一次出现$b,并返回字符串的剩余部分: .strrchr()从后往前查第一个出现的 直接写两行代码: <?php $ ...
- Dozer 使用小结
这篇文章是本人在阅读Dozer官方文档(5.5.1版本,官网已经一年多没更新了)的过程中,整理下来我认为比较基础的应用场景. 本文中提到的例子应该能覆盖JavaBean映射的大部分场景,希望对你有所帮 ...
- jquery訪问ashx文件演示样例
.ashx 文件用于写web handler的..ashx文件与.aspx文件类似,能够通过它来调用HttpHandler类,它免去了普通.aspx页面的控件解析以及页面处理的过程.事实上就是带HTM ...
- Scala--操作符
一.标识符 二.中置操作符 中置表达式,操作符位于两个参数之间 1 to 10 1.to(10) 1 -> 10 1.->(10) 三.一元操作符 a.标识符() 1 toString 1 ...
- Luogu P2055 [ZJOI2009]假期的宿舍
一道网络有关的问题,还是一句话 网络流重在建模! 这里主要讲两种算法. 1.二分图匹配: 分析题意,我们可以知道题目要求是让所有留在学校的人都能有床睡 而 所有留在学校的人=本校不回家的人+外校的人: ...
- 【php增删改查实例】第九节 - 部门管理模块(模糊查询)
给datagrid添加一个工具栏. 效果: 模糊查询部门名称. 接下来,在工具栏区域画一个input框: <div id="toolbar" style="padd ...
- CCNode详解
cocos2d的所有类都以CC开头,那么实际上这个类的名字就是Node,类如其名,这个类的实例就是一个节点.Cocos2d的类是树状继承的,而在内存中,各个实例之间也是以“树”这种数据结构相关联的., ...
- vue-cli 3.0 图片路径问题(何时使用 public 文件夹)
1. 图片放入public文件夹下时 参考:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4 ...
- Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越 ...