es6学习笔记--promise对象
let promise = new Promise((resolve, reject) =>{
// .... some coding
if (true){ // 异步操作成功
resolve(value);
} else {
reject(error);
}
})
promise.then(value=>{
// 成功的回调函数
}, error=>{
// 失败后的回调函数
})
let promise = new Promise((resolve, reject) =>{
console.log('开始')
if (2 > 1){ // 异步操作成功
resolve({name:'peter',age:25});
} else {
reject(error);
}
})
promise.then(value=>{
// 成功的回调函数
console.log(value)
}, error=>{
// 失败后的回调函数
console.log(error)
})
// 开始
// {name: "peter", age: 25}
let promise = new Promise((resolve, reject) =>{
console.log('开始')
if (2 > 3){ // 异步操作成功
resolve(a);
} else {
reject('未知错误');
}
})
promise.then(value=>{
// 成功的回调函数
console.log(value)
}, error=>{
// 失败后的回调函数
console.log(error)
})
// 开始
// 未知错误
Promise的特点:
promise先按顺序实行完promise实例中方法再实行then中的resolve或者reject.
let promise = new Promise((resolve, reject)=>{
console.log('promise')
if (2 > 1){ // 异步操作成功
resolve({name:'peter',age:25});
} else {
reject(error);
}
console.log('end')
})
promise.then(
value=>{
console.log(value)
},
error=>{
console.log(error)
}
)
// promise
// end
// {name: "peter", age: 25}
promise封装Ajax的例子
const getJSON = function (url) {
const promise = new Promise(function (resolve, reject) {
const handler = function () {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
}; getJSON("xxxxx").then(function (json) {
console.log('Contents: ' + json);
}, function (error) {
console.error('出错了', error);
});
then() 为 Promise 实例添加状态改变时的回调函数 ,上面已经提起过.
function start() {
return new Promise((resolve, reject) => {
resolve('start');
});
}
start()
.then(data => {
// promise start
console.log(data);
return Promise.resolve(1); // p1
})
.then(data => {
// promise p1
console.log(data);
})
// start
//
promise的链式编程,就是第一个的Promise实例的返回的值作为下一个Promise实例的参数。
catch() 用于指定发生错误时的回调函数 和then一样,存在链式
function start() {
return new Promise((resolve, reject) => {
resolve('start');
});
}
start()
.then(data => {
// promise start
console.log(data);
return Promise.reject(1); // p1
})
.catch(data => {
// promise p1
console.log(data);
})
ps:then方法指定的回调函数,如果运行中抛出错误(reject),也会被catch方法捕获。如果运行中是正确的,则不会实行catch语句,而是then的回调
function start() {
return new Promise((resolve, reject) => {
if(2>3){
resolve('start');
}else{
reject('error')
}
});
}
start()
.then(data => {
console.log(data);
})
.catch(data => {
console.log(data);
})
// error
try catch方法等价于promise 抛出错误:
// 写法一
const promise = new Promise(function(resolve, reject) {
try {
throw new Error('test');
} catch(e) {
reject(e);
}
});
promise.catch(function(error) {
console.log(error);
}); // 写法二
const promise = new Promise(function(resolve, reject) {
reject(new Error('test'));
});
promise.catch(function(error) {
console.log(error);
})
function start() {
return new Promise((resolve, reject) => {
if(4>3){
resolve('start');
}else{
reject('error')
}
});
}
start()
.then(data => {
console.log(data);
return Promise.resolve(1)
})
.catch(data => {
console.log(data)
})
.then(data => {
console.log(data)
return Promise.reject(2)
})
.catch(data => {
console.log(data);
})
// start
//
//
finally() 不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数
function promise(){
return new Promise((resolve, reject) => {
resolve('success');
})
};
promise().then(data => {
console.log(data)
return Promise.reject('fail')
}).catch(data =>{
console.log(data)
}).finally(() => {
console.log('end')
})
// success
// fail
// end
Promise.all() 将多个 Promise 实例,包装成一个新的 Promise 实例。并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调
const allPromise = Promise.all([p1, p2, p3])
function promise(){
return new Promise((resolve, reject) => {
console.log(1)
resolve('第一个');
})
};
function promise1(){
return new Promise((resolve, reject) => {
console.log(2)
resolve('第二个');
})
};
function promise2(){
return new Promise((resolve, reject) => {
console.log(3)
resolve('第三个');
})
};
Promise.all([promise(), promise1(), promise2()])
.then(data => {
console.log(data)
})
.catch(data => {
console.log(data)
})
//
//
//
// [1,2,3]
function promise(){
return new Promise((resolve, reject) => {
console.log(1)
resolve('第一个');
})
};
function promise1(){
return new Promise((resolve, reject) => {
console.log(2)
reject('第二个');
})
};
function promise2(){
return new Promise((resolve, reject) => {
console.log(3)
resolve('第三个');
})
};
Promise.all([promise(), promise1(), promise2()])
.then(data => {
console.log(data)
})
.catch(data => {
console.log(data)
})
//
//
//
// 第二个
Promise.race() 将多个 Promise 实例,包装成一个新的 Promise 实例。
function promise(){
return new Promise((resolve, reject) => {
setTimeout(function(){
console.log(1);
resolve('第一个');
}, 4000);
})
};
function promise1(){
return new Promise((resolve, reject) => {
setTimeout(function(){
console.log(2);
resolve('第二个');
}, 2000);
})
};
function promise2(){
return new Promise((resolve, reject) => {
setTimeout(function(){
console.log(3);
resolve('第三个');
}, 3000);
})
};
Promise.race([promise(),promise1(), promise2()])
.then(data => {
console.log(data)
})
.catch(data => {
console.log(data)
})
// 2
// 第二个
//
//
Promise.resolve() 返回一个新的Promise实例,并且状态为resolve。
function fn(){
console.log('success')
return 1
}
Promise.resolve(fn())
.then(data => {
console.log(data)
})
// success
//
Promise.reject() 返回一个新的Promise实例,并且状态为reject。
function fn(){
console.log('fail')
return 2
}
Promise.reject(fn())
.then(data => {
console.log(data)
})
.catch(data => {
console.log(data)
})
// fail
//
有了Promise
对象,就可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供了统一的接口,使得控制异步操作更加容易。
对应的笔记和实例,我放到了GitHub,https://github.com/sqh17/notes
有什么问题请私信或留下评论,一起加油。
es6学习笔记--promise对象的更多相关文章
- js-ES6学习笔记-Promise对象(2)
1.Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的.它的作用是为Promise实例添加状态改变时的回调函数. 2.Promise.pr ...
- js-ES6学习笔记-Promise对象
1.Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 2.所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作) ...
- es6学习笔记-proxy对象
前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...
- ES6 学习笔记之四 对象的扩展
ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...
- ES6学习笔记(对象)
1.属性的简洁表示法 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {f ...
- ES6学习笔记(8)----对象的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 对象的扩展 1.属性名的简洁表示法 : ES6允许在代码中直接写变量,变量名是属性名,变量值是属 ...
- ES6学习笔记(对象新增方法)
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...
- ES6 学习笔记之对象的拓展
1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样书写更加简洁. const foo = 'bar'; const baz = {foo}; baz //{foo: &q ...
- ES6 学习笔记之对象的新增方法
1. Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的 NaN 不等于自身,以及 +0 等 ...
随机推荐
- dojo拼接成CSV格式字符串
var student = "学号,姓名,年龄\n"; for(var i = 0;i<resp.items.length;i++) { student += resp.it ...
- JSP自定义标签配置
JSP自定义标签配置 JSP自定义标签 <taglib> <taglib-uri>/WEB-INF/you.tld</taglib-uri> ...
- MySQL查询所有数据库表出错
1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:show tables 错误代码: 1046 No database sel ...
- Flex中对表格中某列的值进行数字格式化
1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?xml version="1.0" encoding="utf- ...
- FtpHelper ftp操作类库
FtpHelper ftp操作类库 using System; using System.Collections.Generic; using System.Linq; using System.Te ...
- C++遍历二维数组的四种方法
#include <iostream> using std::cin; using std::cout; using std::endl; using std::string; using ...
- 转:SQL进阶之变量、事务、存储过程与触发器
一.变量那点事儿 1.1 局部变量 (1)声明局部变量 DECLARE @变量名 数据类型 DECLARE @name varchar(20) DECLARE @id int (2)为变量赋值 SET ...
- C#图解教程 第十三章 委托
委托 什么是委托委托概述声明委托类型创建委托对象给委托赋值组合委托为委托添加方法从委托移除方法调用委托委托示例调用带返回值的委托调用带引用参数的委托匿名方法 使用匿名方法匿名方法的语法 Lambda ...
- 【BZOJ4555】求和(第二类斯特林数,组合数学,NTT)
[BZOJ4555]求和(第二类斯特林数,组合数学,NTT) 题面 BZOJ 题解 推推柿子 \[\sum_{i=0}^n\sum_{j=0}^iS(i,j)·j!·2^j\] \[=\sum_{i= ...
- 【HDU1695】GCD(莫比乌斯反演)
[HDU1695]GCD(莫比乌斯反演) 题面 题目大意 求\(a<=x<=b,c<=y<=d\) 且\(gcd(x,y)=k\)的无序数对的个数 其中,你可以假定\(a=c= ...