Promise对象
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise
对象有两个特点:(1)对象的状态不受外界影响。(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。
Promise
也有一些缺点。首先,无法取消Promise
,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。第三,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
1.基本用法
ES6 规定,Promise
对象是一个构造函数,用来生成Promise
实例。
const p = new Promise(function(resolve,reject){
if(/* 异步操作成功 */){
resolve(value);
}else{
reject(error);
}
});
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
(将对象状态从"未完成"变为"成功")和reject
(将对象状态从"未完成"变为"失败")。
注意
调用resolve
或reject
并不会终结 Promise 的参数函数的执行。
一般来说,调用resolve
或reject
以后,Promise 的使命就完成了,后继操作应该放到then
方法里面,而不应该直接写在resolve
或reject
的后面。
Promise.then( )
then
方法是定义在原型对象Promise.prototype
上的。它的作用是为 Promise 实例添加状态改变时(变为resolved)的回调函数。
注意:
then
方法返回的是一个新的Promise
实例(注意,不是原来那个Promise
实例)。因此可以采用链式写法,即then
方法后面再调用另一个then
方法。
let promise = new Promise((resolve,reject) => {
resolve();
});
promise.then(() => {
console.log("A");
})
Promise.catch( )
用于指定发生错误时的回调函数。如果异步操作抛出错误,状态就会变为rejected
,就会调用catch()
方法指定的回调函数,处理这个错误。
const promise = new Promise((resolve,reject) => {
throw new Error("test");
});
promise.catch((err) => {
console.log(err);
})
// Error: test
一般来说,不要在then()
方法里面定义 Reject 状态的回调函数(即then
的第二个参数),总是使用catch
方法。
Promise.finally( )
finally()
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
promise
.then(result => { })
.catch(error => { })
.finally(() => { });
finally
方法的回调函数不接受任何参数,finally
方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。
Promise.all( )
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
接收的是一个数组,数组元素是promise,如果所有元素变为resolve状态,就变为resolve状态,如果有一个元素变为reject状态,就变为reject状态.
function CreatPromise(msg){
var p = new Promise((resolve,reject) => {
if(Math.random() > 0.5 ){
resolve(msg + "成功")
}else{
reject(msg + "失败")
};
});
return p;
};
var p1 = CreatPromise("A");
var p2 = CreatPromise("B");
var p3 = CreatPromise("C");
var p = Promise.all([p1,p2,p3]);
p.then((data) =>{
//data是p1 p2 p3 的成功消息组成的数组
console.log(data);
}).catch((err) =>{
//err 是第一个失败的参数
console.log(err);
});
Promise.race()
只要元素之中有一个实例率先改变状态,p
的状态就跟着改变。
function CreatPromise(msg){
var p = new Promise((resolve,reject) => {
if(Math.random() > 0.5 ){
resolve(msg + "成功")
}else{
reject(msg + "失败")
};
});
return p;
};
var p1 = CreatPromise("A");
var p2 = CreatPromise("B");
var p3 = CreatPromise("C");
var p = Promise.race([p1,p2,p3]);
p.then((data) =>{
//data是p1 p2 p3 的成功消息组成的数组
console.log(data);
}).catch((err) =>{
//err 是第一个失败的参数
console.log(err);
});
一些操作实例
{
var p1 = new Promise(function (resolve, reject) {
$.ajax({
url: "./Data/Data.txt",
dataType: "json",
success(arr) {
resolve(arr);
},
error(err) {
reject(err);
}
});
});
var p2 = new Promise(function (resolve, reject) {
$.ajax({
url: "./Data/Json.txt",
dataType: "json",
success(arr) {
resolve(arr);
},
error(err) {
reject(err);
}
});
});
Promise.all([
p1, p2
]).then((arr) => {
console.log(arr); //arr 就是p1 p2成功返回的结果
let [res1, res2] = arr; //解构赋值 p1的结果赋值给res1 p2的结果赋值给res2
}).catch((err) => {
console.log(err);
});
}
{ //上面结构的封装
function CreatePromise(url) {
return new Promise(function (resolve, reject) {
$.ajax({
url,
dataType: "json",
success(arr) {
resolve(arr);
},
error(err) {
reject(err);
}
});
});
};
Promise.all([
CreatePromise("./Data/Data.txt"),
CreatePromise("./Data/Json.txt")
]).then((arr) => {
console.log(arr); //arr 就是p1 p2成功返回的结果
let [res1, res2] = arr; //解构赋值 p1的结果赋值给res1 p2的结果赋值给res2
}).catch((err) => {
console.log(err);
});
}
{ //使用jQ已封装的Promise
Promise.all([
$.ajax({url:"./Data/Data.txt",dataType:"json"}),
$.ajax({url:"./Data/Json.txt",dataType:"json"}),
]).then((arr) => {
console.log(arr); //arr 就是p1 p2成功返回的结果
let [res1, res2] = arr; //解构赋值 p1的结果赋值给res1 p2的结果赋值给res2
}).catch((err) => {
console.log(err);
});
}
{
// Promise实现异步
Promise.all([
ajax1,
ajax2
]).then((arr) => {
//然后对arr进行你想要的操作
}).catch((err) =>{
// 错误信息
})
}
本文章是参考https://es6.ruanyifeng.com/#docs/promise该网站整理出来的,如果想进一步学习,推荐大家去这里看哦.