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 等 ...
随机推荐
- 0_OpenCV3.4.0+Visual Studio2017 + win10环境配置
研究生学习方向是计算机视觉,因此想从传统的算法开始,于是尝试安装Opencv做一些项目.在安装过程中碰到很多问题,搭建成功后立刻记录下来,一遍以后查看. 安装环境:windows10 64bit 专业 ...
- R-CNN算法概要
参考论文:Rich feature hierarchies for accurate object detection and semantic segmentation 下载地址:https://a ...
- directdraw显示yuv422(yuy2)
#include <mmsystem.h> void CshowpicDlg::OnBnClickedButton3() { // TODO: 在此添加控件通知处理程序代码 height ...
- 详解Linux Initrd
在Linux操作系统中,有一项特殊的功能--初始化内存盘INITRD(INITial Ram Disk)技术,而且内核支持压缩的文件系统映像.有了这两项功能,我们可以让Linux系统从小的初始化内存盘 ...
- freemarker写select组件报错总结(三)
1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...
- 觉得OpenStack的网络复杂?其实你家里就有同样一个网络
当你想了解OpenStack的Neutron网络,打开下面这张图的时候,心里一定是崩溃的,看起来这些模块连在一起很复杂,但其实和你家里的网络很像,看不出来?看我来慢慢解析. 其实这个网络的样子更像是我 ...
- SSH框架之-hibernate 三种状态的转换
一.遇到的神奇的事情 使用jpa操作数据库,当我使用findAll()方法查处一个List的对象后,给对这个list的实体进行了一些操作,并没有调用update 或者 saveOrUpdate方法,更 ...
- 支持行单击、双击事件的GridView和DataList控件(译)
支持行单击.双击事件的GridView和DataList控件(译) 让GridView 和 DataList 控件响应鼠标单击.双击事件.并且,使用 ClientScript.Regi ...
- C#异常处理--C#基础
try...catch:捕获异常try...finally:清除异常try..catch...finily:处理所有异常 1.捕获异常 using System; using System.Colle ...
- 【BZOJ1007】水平可见直线(单调栈)
[BZOJ1007]水平可见直线(单调栈) 题解 Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为 可见的 ...