Js 之promise、async 和 await
一、示例代码
<html> <head></head> <body> <script src="jquery.js"></script> <script> const login = async function(){ var a = await new Promise((resolve, reject) => { $.get("", function(res){ resolve(res); }, 'json'); }); console.log(a); var b = await test2(); return b; } function test2(){ return 'test2'; } login().then(res => { console.log(res); }); </script> </body> </html>
二、promise
Promise 是承诺的意思，承诺它过一段时间会给你一个结果。Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。从语法上讲，promise 是一个对象，从它可以获取异步操作的消息；
promise 有三种状态：pending 初始状态也叫等待状态，fulfiled成功状态，rejected 失败状态；状态一旦改变，就不会再变。创造 promise实例后，它会立即执行。需要注意，promise 的状态是不可逆的，一旦状态由 pending 变为 fulfiled 或者reject 状态，意味着已经产生了结果，同样，转为成功状态会有成功的结果，转为失败状态会返回失败的原因。
promise 作为构造函数，接收两个参数，分别是成功和失败的回调函数。
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(), second * 1000);
});
}
sleep(3)
.then(() => {
console.log("开始执行");
return sleep(3);
})
.then(() => {
console.log("第二次执行");
return sleep(3);
})
.then(() => {
console.log("第三次执行");
});
then 捕获resolve回调
catch 捕获reject状态的回调
p.then((data) => {
console.log("resolved", data);
}).catch((err) => {
console.log("rejected", err);
});
三、async
async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。使用如下：
async function fun() {
console.log(1);
return 1;
}
fun().then(val => {
console.log(val) // 1,1
})
四、await
await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；如果不是Promise对象：把这个非promise的东西当做await表达式的结果。使用如下：
async function fun() {
let a = await new Promise((resolve, reject) => {
setTimeout(function () {
resolve('setTimeout promise')
}, 3000)
})
let b = await "表达式";
let c = await function () {
return '函数表达式'
}()
console.log(a, b, c)
}
fun(); // 3秒后输出："setTimeout promise" "表达式" "函数表达式"
