promise 是什么
Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。(简单说就是处理异步请求。一个诺言,一个成功,一个失败。)
看个例子
var promise = new Promise(function(resolve){
resolve(42);
});
promise.then(function(value){
console.log(value);
}).catch(function(error){
console.error(error);
});
运行后,打印出42,为什么会是42呢?带着这个疑惑继续放下看
promise 状态
一个Promise必须处在其中之一的状态:pending, fulfilled 或 rejected.
pending 状态:可以转换到 fulfilled 或 rejected 状态。
fulfilled 状态:不能转换成任何其它状态;必须有一个值,且这个值不能被改变。
rejected 状态:不能转换成任何其它状态;必须有一个值,且这个值不能被改变。
promise 对象
创建 promise 对象
1.new Promise(fn)
返回一个 promise 对象。
2.fn是个函数,fn有两个参数
- resolve:处理结果成功的时候调用
resolve(处理结果值)
。 - reject:处理结果错误的时候调用
reject(Error对象)
。
then 方法
一个 Promise 必须提供一个 then 方法来获取其值。
Promise 的 then 方法接受两个参数:
promise.then(onFulfilled,onRejected)
1.onFulfilled 和 onRejected 都是函数,如果不是函数,则忽略之。
2.onFulfilled :resolve(成功)时调用 onFulfilled,必须在promise fulfilled后调用,且promise的value为其第一个参数,不能多次调用。
3.onRejected:reject(失败)时调用 onRejected,必须在promise rejected后调用, 且promise的reason为其第一个参数,不能被多次调用。
.catch
只是 promise.then(undefined, onRejected)
的别名而已。
Promise.reject(new Error("BOOM!")).catch(function(error){
console.error(error); // Error: BOOM!
});
开始那个例子就变成简单明了,relove(42) 成功是调用function(value){console.log(value)}
,所以打印出 42 。
对于一个 promise,它的 then 方法可以调用多次。
promise.then(onFulfilled,onRejected).then(onFulfilled,onRejected);
promise.then(onFulfilled,onRejected); promise.then(onFulfilled,onRejected);
then 必须返回一个 promise
promise2 = promise1.then(onFulfilled, onRejected);
创建 XHR 的promise 对象
function ajax(options){
return new Promise(function(resolve,reject){
let {method,url} = options;
let xhr = new XMLHttpRequest();
xhr.open(method,url);
xhr.onload = function(){
if(xhr.status === 200){
resolve(xhr.responseText)
}else{
reject(new Error(xhr.statusText))
}
};
xhr.onerror = function(){
reject(new Error(xhr.statusText))
};
xhr.send()
})
}
// 运行
var promise = ajax({method:'GET',url:'xxx.json'});
promise.then(function(value){
console.log(value)
},function(reason){
console.error(reason)
})
// xxx.json
{
"name":"jack",
"nationality":"china"
}
ajax 只有在通过XHR取得结果状态为200时才会调用 resolve 。而其他情况(取得失败)时则会调用 reject 方法。
当调用成功时,打印出
{
"name":"jack",
"nationality":"china"
}
我们把 url 地址故意写错,调用失败,将会报错,显示如下
Error: Not Found
Promise 是同步还是异步执行
再看个例子
console.log(1)
setTimeout(function(){
console.log(2)
},0)
var promise =new Promise(function(resolve){
resolve(3)
}).then(function(value){
console.log(value)
})
console.log(4)
打印出1 4 3 2。
Promise 是异步执行的。有个问题,为什么 setTimeout 模拟异步会比 promise 晚出现呢?
这就涉及到 microtask 和 macrotask 问题。简单说,promise 排在了异步下批执行的第一梯队,而setTimeout 则排在第二梯队。
Promise API
Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法。
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function(resolve) {
setTimeout(resolve, 500, "foo");
});
Promise.all([p1, p2, p3]).then(function(value) {
console.log(value); // [3, 1337, "foo"]
});
Promise.race 接收一个 promise对象的数组作为参数,只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的处理。
var p5 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
console.log(value)
}, function(reason) {
console.log(reason); // "six"
// p6 更快,所以它失败了
});
网友评论