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 等 ...
随机推荐
- 判断ios或者android
<script type="text/javascript"> $(function () { // android和iso下载链接 var u = navigator ...
- 【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html 项目github地址:https://github.com/shamoyuu/ ...
- 【javascript】jquery jsonp跨越请求
<html> <head> <meta charset="utf-8"> <title></title> <scr ...
- 图像处理------颜色梯度变化 (Color Gradient)
有过UI设计经验的一定对2D图形渲染中的Color Gradient 或多或少有些接触,很多编程 语言也提供了Gradient的接口,但是想知道它是怎么实现的嘛? 本文介绍三种简单的颜色梯度变化算法, ...
- AM335x(TQ335x)学习笔记——LCD驱动移植
TI的LCD控制器驱动是非常完善的,共通的地方已经由驱动封装好了,与按键一样,我们可以通过DTS配置完成LCD的显示.下面,我们来讨论下使用DTS方式配置内核完成LCD驱动的思路. (1)初步分析 由 ...
- 初识 systemd
从 init 系统说起 linux 操作系统的启动首先从 BIOS 开始,接下来进入 boot loader,由 bootloader 载入内核,进行内核初始化.内核初始化的最后一步就是启动 PID ...
- Mac 常用快捷键
可以按下组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,需按住一个或多个修饰键,同时按快捷键的最后一个键.例如,要使用快捷键 Command-C(拷贝),请按住 Co ...
- linux shell 基本规范
开头指定脚本解释器 #!/bin/bash 或 #!/bin/sh 开头加版权信息 #Date: 2017-8-01 22:50 #Author: yang qiang wei #Mail: xxx@ ...
- JAVA IDE IntelliJ IDEA 快捷键使用详记
一.高效定位代码 1.项目之间的跳转 Ctrl + Alt + [ :切换到下一个项目窗口 Ctrl + Alt + ] : 切换到上一个项目窗口 2.文件之间的跳转↑↓←→ Ctrl + E ...
- Struts2【配置】知识要点
前言 上篇Struts博文已经讲解了Struts的开发步骤以及执行流程了.....对Struts的配置文件有了了解.....本博文继续讲解Struts在配置的时候一些值得要学习的细节... 通配符 为 ...