同步、异步是什么?有什么区别?这些问题我在这儿就不再做其他的赘述,前端人应该都懂得。今天我想来说一说es6中异步操作的新方法promise。
Promise介绍
Promise就是实现异步编程的一种解决方案,核心就是Promise对象。Promise对象就像一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。它可以将异步操作以同步操作的流程表达出来,避免层层嵌套(callback)的毁掉函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
Promise对象的两个特点:
(1)对象的状态不受外界影响。有三种状态:pending(进行中)、resolved(已成功)、rejected(已失败);
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为resolved和从pending变为rejected。
Promise缺点:
(1)无法取消Promise,一旦新建它就会立即执行,无法中途取消;
(2)如果不设置回调函数,Promise内部抛出的错误,不会反应到外部;
(3)当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
基本用法
const promise = new Promise(function(resolve,reject) {
if(true){
resolve(value);
} else {
reject(error);//可选,不是必须存在
}
})
promise.then(function(value) {//value为resolve成功执行传下来的参数
//成功
},function(error) {
//失败
})
例子如下:
function timeout(ms) {
return new Promise((resolve,reject) => {
setTimeout(resolve,ms,'done');
})
}
timeout(100).then((value) => {
console.log(value)//done
})
100ms打印出done。
Promise新建之后就会立即执行
let promise1 = new Promise(function(resolve,reject) {
console.log('Promise');
});
//Promise
调用resolve或reject并不会终结Promise的参数函数的执行
new Promise((resolve,reject) => {
return resolve(1);
//一般来说,调用resolve或reject以后,Promise的使命就完成了,后继续操作应该放到then方法里面,而不应该直接写在resolve或reject后面。所以,最好在它们前面加上return语句,这样就不会有意外
console.log(2);
}).then(r => {
console.log(r);
})
//1
API方法介绍
Promise.resolve
Promise.resolve方法作用于将现有对象转为Promise对象
Promise.resolve方法的参数分成以下四种情况:
(1)参数是一个Promise实例,Promise.resolve将不做任何修改,原封不动地返回这这个实例
let promise = new Promise(function(resolve,reject) {
resolve(41)
});
let p0 = Promise.resolve(promise);
console.log(p0 === promise)
//true
(2)参数是一个thenable对象,thenable对象指的是具有then方法的对象
let thenable = {
then: function(resolve,reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value);
})
//42
(3)参数不是具有then方法的对象,或根本就不是对象,Promise.resolve方法返回一个新的Promise对象,状态为resolved
const p = Promise.resolve('hello');
p.then(function(s) {
console.log(s)
})
//hello
(4)不带有任何参数,直接返回一个resolved状态的Promise对象
注意:立即resolve的Promise对象,是在本轮“事件循环”的结束时,而不是在下一轮“事件循环”的开始时。
setTimeout(function () {
console.log('three');
},0)
Promise.resolve().then(function () {
console.log('two');
})
console.log('one')
//one two three
Promise.reject
Promise.reject(reason)方法会返回一个新的Promise实例,该实例的状态为rejected
const p = Promise.reject('出错了');
p.then(null,function (s) {
console.log(s)
})
//出错了
注意:Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致
const thenable = {
then(resolve,reject) {
reject('出错了');
}
}
Promise.reject(thenable)
.catch(e => {
console.log(e === thenable)
})
//true
Promise.all
Promise.all()方法用于将多个Promise实例,包装成一个新的Promise实例
const a = Promise.all([a1,a2,a3]);
a的状态由a1、a2、a3决定,分成两种情况:
(1)只有a1、a2、a3的状态都变成fulfilled,a的状态才会变成fulfilled,此时a1、a2、a3的返回值组成一个数组,传递给a的回调函数。
(2)只要a1、a2、a3之中有一个被rejected,a的状态就变成rejected,此时第一个reject的实例的返回值,会传递给a的回调函数。
const p1 = new Promise((resolve,reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);////用于捕获异常
const p2 = new Promise((resolve,reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1,p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//["hello", Error: 报错了]
上面代码中,p1会resolved,p2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的 Promise 实例,p2指向的实际上是这个实例。该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。
const q1 = new Promise((resolve,reject) => {
resolve('hello');
})
.then(result => result);
const q2 = new Promise((resolve,reject) => {
throw new Error('报错了');
})
.then(result => result);
Promise.all([q1,q2])
.then(result => console.log(result))
.catch(e => console.log(e));
//Error: 报错了
Promise.race
Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例
const p = Promise.race([p1,p2,p3]);
只要p1、p2、p3之中有一个实例率先改变状态,p得状态就会跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数
const p1 = new Promise((resolve,reject) => {
setTimeout(() => reject(new Error('request timeout')),1000)
})
.then(result => result)
const p2 = new Promise((resolve,reject) => {
setTimeout(() => resolve('hello'),500)
})
.then(result => result)
const p = Promise.race([p1,p2]);
p.then(response => console.log(response));
p.catch(error => console.log(error));
//hello
如果p1提前响应,则会返回Error: request timeout
catch
catch方法会捕获异步操作中抛出的错误
const promise = new Promise(function(resolve,reject) {
throw new Error('test');
})
promise.catch(function(error) {
console.log(error);
})
//Error: test
下面的例子更易理解
const someAsyncThing = function() {
return new Promise(function(resolve,reject) {
//下面一行会报错,因为x没有声明
resolve(x + 2);
})
}
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no',error);
//下面一行会报错,因为y没有声明
y + 2;
}).then(function() {
console.log('carry on');
}).catch(function(error) {
console.log('carry on',error)
})
//oh no ReferenceError: x is not defined
//carry on ReferenceError: y is not defined
done
Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,提供了一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。
asyncFunc()
.then(f1)
.catch(r1)
.then(f2)
.done();
原理:
Promise.prototype.done = function (onFulfilled,onRejected) {
this.then(onFulfilled,onRejected)
.catch(function (reason) {
//抛出一个全局错误
setTimeout(() => {throw reason},0)
})
}
finally
finally方法用于指定不管Promise对象状态如何,都会执行的操作。它与done方法最大的区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。
例子:服务器使用Promise处理请求,然后使用finally方法关掉服务器
server.listen(0)
.then(function () {
//run test
})
.finally(server.stop);
原理:
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => {throw reason})
)
}
常见的几种Promise处理问题的方法
Promise实例作为参数
一个异步操作返回的结果是返回另一个异步操作
const p1 = new Promise(function(resolve,reject) {
setTimeout(() => reject(new Error('fail')),3000)
})
const p2 = new Promise(function(resolve,reject) {
setTimeout(() => resolve(p1),1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
//Error: fail p2以P1为参数,返回的结果其实是p1返回的结果
Promise处理未知(同步/异步)函数
对于一些未知的函数,我们不需要考虑它是同步还是异步,按照下面方法进行处理,即可使得同步函数同步执行,异步函数异步执行。
方法一:用async函数来写
const f = () => console.log('now');
(
async () => f() //同步函数被异步方法包装之后会变成异步执行
)() //立即执行,使得同步函数不受异步方法影响
.then() //获取异步的结果
.catch() //捕获错误
方法二:使用new Promise()
const m = () => console.log('now');
(
() => new Promise(
resolve => resolve(m())
)
)()
console.log('next')
//now
//next
方法三:Promise.try
const n = () => console.log('now');
Promise.try(n);
console.log('next');
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("/sssposts.json").then(function(json) {
console.log('Contents' + json);
},function(error) {
console.log('出错了',error);
})
异步加载图片
function loadImageAsync(url) {
return new Promise(function(resolve,reject) {
const image = new Image();
image.onload = function() {//加载成功
resolve(image);
}
image.onerror = function() {//加载失败
reject(new Error('Could not load image at' + url));
}
image.src = url;
})
}
异步任务同步化
const time = 2000;
const longTimeTask = async function(){
return new Promise ((resolve, reject) => {
setTimeout (() => {
console.log(`等了${time || 'xx'}年,终于回信了`);
resolve({'msg':'task done'});
},time||1000)
})
}
const exec1 = async function () {
let result = await longTimeTask();//等上面任务执行完毕再执行下面的任务
console.log('result after long time ===>', result)
}
exec1();