文章目录
- 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>javascript">
//如何接收回调地域
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>javascript">
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>javascript">
//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>
