ES6有两种异步编程的方式:promise,async
promise
promise是一个对象,可以获取异步操作的消息
状态:promise有三种状态:pending(进行时),fulfilled(已成功)rejected(已失败)
状态转变只能从pending转化为fulfilled,或者是从pending转化为rejected,只要处于pending或者是rejected,状态将不会改变
这种方法,一旦执行将不会取消,如果不设置回调函数,promise内部抛出的错误,外部将不会知道,并且在执行的过程中无法知道进行到哪一步,比如说是刚刚开始或者说是即将完成
then方法
then接受两个参数,其中一个参数是执行成功后调用的回调函数,另一个方法是执行失败后调用的回调函数
在JavaScript当前队列完成之后,才会执行then方法中的回调函数
const p = new Promise(function(resolve,reject){
resolve('success');
});
p.then(function(value){
console.log(value);
});
console.log('first');
// first
// success
异步加载图片
let promise = new Promise(function (resolve, reject) {
let img = new Image();
img.onload = function () {
setTimeout(resolve,1000,img);
};
img.onerror = function () {
reject(new Error("图片加载失败!"));
}
img.src = "图片路径";
});
promise.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
//如果图片加载成功,就显示图片,如果加载失败,就返回图片加载失败
async
语法:async function 函数名称(参数){代码块}
async函数可以返回一个promise对象,使用then,catch,finally方法添加回调函数
async function getinfo(){
const name= await getName();
const sex=await getSex();
return {
name:name,
sex:sex
};
}
console.log(getinfo());
getinfo().then(function (res){
console.log(res);
});
async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个报错
await操作符
await操作符用于等待一个promise对象,只能在async function外部使用
[return_value] = await expression;
expression是一个promise对象或者是任意需要等待的值
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果
await针对所跟不同表达式的处理方式:
Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
非 Promise 对象:直接返回对应的值