本文深入解析ES6 Promise对象与async/await语法，旨在解决传统异步回调带来的代码嵌套过深问题。详细阐述Promise的三种状态及then、catch、finally方法，结合Ajax封装示例，展示如何规范处理异步流程。同时介绍async函数必返回Promise的特性及await关键字的使用限制，帮助开发者掌握现代JavaScript异步编程的核心技巧。
Promise对象的核心价值在于解决异步编程中常见的回调地狱问题。其生命周期包含三种状态：pending（进行中）、fulfilled（已成功）以及rejected（已失败）。
Promise是ES6引入的一种异步编程解决方案，语法层面它是一个构造函数，主要用于封装异步操作，并允许开发者获取操作成功或失败的结果。
通过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方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！