1. promise的含义
promise是ES6原生提供的一个用于解决异步编程对象。通俗理解,promise就是一个保存某个未来才会结束的事件的结果的容器。
1.1 promise的两个特点
对象的状态不受外界影响:promise有三种状态,pending(进行中),fulfilled(已成功),rejected(已失败)。除了异步操作的结果,其他手段都无法改变这个状态
一旦状态改变,就不会再变化,任何时候都可以得到这个结果:状态的改变只有两种可能,从pending变为fulfilled和从pending变为rejected。只要这两种之一发生,状态凝固不会再变,会一直保持这个结果,此时再对函数promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
2.基本用法
promise构造函数的接受一个函数作为参数,该函数的两个参数为resolve和reject。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
2.1promise.prototype.then
promise原型里有then方法,它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数,它们都是可选项。then的返回的是一个新的promise实例。因此可以采用链式写法,即then方法后面再调用另一个then方法。以下面get请求的ajax为例
const setAjax = function (url) {
const xhr = new XMLHttpRequest();
const promise = new Promise(function (resolve, reject) {
const handler = function () {
if (this.readyState !== 4) return;
this.status == 200 ? resolve(this.response) : reject(this.statusText);
};
xhr.open("GET", url);
xhr.onreadystatechange = handler;
xhr.send();
});
return promise;
};
setAjax("http://localhost:8888/test/first")
.then((setSecond) => setAjax("http://localhost:8888/test/second"))
.then(
(success) => console.log(success),
(err) => console.log("出错了",err)
);
在上述例子中,第一个then方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就调用第一个回调函数,如果状态变为rejected,就调用第二个回调函数。
2.2 Promise.prototype.catch()
Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。举个例子
const p1 = new Promise(function (resolve, reject) {
resolve(1);
});
p1.then((res) => {
return new Promise(function (resolve, reject) {
reject(4);
});
})
.then((res) => {
console.log(res);
})
.catch((res) => {
console.log(res);
});
上面代码中,如果p1状态变为resolved,则会调用then()方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected,就会调用catch()方法指定的回调函数,处理这个错误。另外,then()方法指定的回调函数,如果运行中抛出错误,也会被catch()方法捕获。
未完待续。。。