ES6中的Promise对象与async和await方法详解
作者：简单长庚
Promise是es6引入的异步编程薪解决方案，语法上promise就是一个构造函数，用来封装异步操作病可以获取其成功或失败的结果，这篇文章主要介绍了ES6中的Promise对象与async和await方法,需要的朋友可以参考下
promise存在的意义：解决异步回调地狱问题
三种状态：pending（进行中）、fulfilled（已成功）、reject（已失败）
Promise是es6引入的异步编程薪解决方案，语法上promise就是一个构造函数，用来封装异步操作病可以获取其成功或失败的结果。
Promise构建出来的实例存在以下方法： then() 是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数 catch() 用于指定发生错误时的回调函数 finally() 用于指定不管 Promise 对象最后状态如何，都会执行的操作
1）promise构造函数：promise（excutor）{}
2）promise.protiotype.then方法
3）promise.prototype.catch方法
<script>
//如何接收回调地域
function aaa() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
console.log("执行了aaa");
}, 2000)
})
}
function bbb() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
console.log("bbb");
}, 3000)
})
}
function ccc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
console.log("ccc");
}, 3000)
})
}
function fn1() {
var sum = 0;
aaa().then((res) => {//返回promise对象
sum = sum + res;
return bbb();
}).then((res) => {
sum = sum + res;
return ccc();
}).then((res) => {
sum = sum + res;
console.log("sum", sum);
// return sum
})
}
// fn1();
//promise对象，用于处理多个异步，（传入的参数是一个数组），在所有异步都执行完毕才会触发，都成功才触发
//比如一个页面上需要等待多个ajax请求，然后才正常显示页面
//只要有一个失败则为失败
let a = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
console.log("a");
}, 3000)
})
let b = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(6);
console.log("b");
}, 3000)
})
// Promise.all([a, b]).then((result) => {
// console.log("result", result);
// }).catch((err) => {
// console.log("err", err);
// });
//Promise.race 执行时间快执行，那个promise执行的快，就选哪个
//不管结果本身，是成功状态还是失败状态，只看执行时间
Promise.race([a, b]).then((res) => {
console.log("成功了", res);
}).catch(err => {
console.log("err", err);
})
</script>
promise的两个方法all和race见上述
Promise封装的ajax
<script>
const p = new Promise((resolve, reject) => {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("get", "");
//3.发送
xhr.send();
//4.绑定事件，处理响应结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState == 4) {
//判断响应状态码200-299
if (xhr.status >= 200 && xhr.status < 300) {
//表示成功
resolve(XHR.response);
} else {
//如果失败
reject(xhr.status)
}
}
}
})
//指定回调
p.then(function (value) {
console.log(value);
}, function (reason) {
console.log(reason);
})
</script>async和await方法
async 是es7才有的一个关键字，和promise对象有很大的关联
async 标识的函数，必定返回promise对象
await 关键字 只能放在 async标识的函数中
作用就是等待获取promise返回的内容，也就是resolve和reject的值
<script>
//async 返回的是一个promise对象
// async function fn() {
// // return "123"
// //如果返回的不是一个promise对象，则返回的就是一个成功的promise对象
// //抛出错误 返回的是一个失败的promise对象
// // throw new Error('出错了！')
// //返回的结果是一个promise对象
// return new Promise((resolve, reject) => {
// resolve('成功的数据');//返回的也是promise成功的值
// // reject("失败的内容");//返回的也是失败的neirong
// })
// }
// const result = fn();
// result.then(value => {
// console.log(value);
// }, reason => {
// console.warn(reason)
// })
// console.log(result);
//await 表达式
//1.await必须写在async函数中 2.await右侧的表达式一般为promise对象
//3.await 返回的是promise成功的值 4.await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
const p = new Promise((resolve, reject) => {
// resolve("成功的值!");
reject('失败啦！');
})
//await要放在async函数中
async function main() {
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
//调用函数
main();
</script>
到此这篇关于ES6中的Promise对象与async和await方法详解的文章就介绍到这了,更多相关Promise对象与async和await方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！