4.3Promise对象
4.3.1Promise概述
- Promise是异步编程的一种解决方案。
- Promise是为了解决多重嵌套回调函数而提出的。
- 它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。
- Promise是一个对象,从它可以获取异步操作的消息。
- Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。
- Promise有以下两个特点:
- 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。
- 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。
- Promise也有一些缺点:
- 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
- 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
- 当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
4.3.3使用Promise实现Ajax操作
var getData = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest(); // 封装请求对象
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response); // 请求成功执行
} else {
reject(new Error(this.statusText)); // 请求失败执行
}
};
});
return promise;
};
getData("/posts/info")
.then(
function(json) {console.log('Contents: ' + json);},
function(error) {console.error('出错了', error);}
);
- 如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数。
4.3.4基本用法
- ES6规定,Promise对象是一个构造函数,用来生成Promise实例。
- Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。
- resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用并将异步操作的结果,作为参数传递出去。
- reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用并将异步操作报出的错误,作为参数传递出去。
var promise = new Promise(function(resolve, reject) {
if (true){
resolve(value);
} else {
reject(error);
}
});
4.3.5then方法
- then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。
- 因此可以采用链式写法,即then方法后面再调用另一个then方法。
//第一个then方法指定的回调函数,返回的是另一个Promise对象。
//第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。
//如果变为Resolved,就调用funcA,如果状态变为Rejected,就调用funcB。
getData("/get/info")
.then(function(get) {return getData(get.commentURL);})
.then(
function funcA(comments) {console.log("Resolved: ", comments);},
function funcB(err){console.log("Rejected: ", err);}
);
//箭头函数简写
getData("/get/info")
.then( get => getData(get.commentURL ))
.then(
comments => console.log("Resolved: ", comments),
err => console.log("Rejected: ", err)
);
4.3.6catch方法
- Promise.prototype.catch方法是.then(null, rejection)的别名
- 用于指定发生错误时的回调函数。
- then方法指定的回调函数,如果运行中抛出错误也会被catch方法捕获。
p.then((val) => console.log("fulfilled:", val)) .catch((err) => console.log("rejected:", err)); // 等同于 p.then((val) => console.log("fulfilled:", val)) .then(null, (err) => console.log("rejected:", err));
4.3.7done()方法
- Promise对象的回调链,不管以then方法还是catch方法结尾,要是最后一个方法抛出错误,都可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)
- 提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。
Promise.prototype.done = function (onFulfilled, onRejected) { this.then(onFulfilled, onRejected) .catch(function (err) { // 抛出一个全局错误 setTimeout(() => { throw err }, 0); }); };
原文地址:https://www.cnblogs.com/xuzhengguo/p/12057019.html
时间: 2024-11-05 21:47:01