// promise基本用法
let promise = new Promise((resolve, reject) => {
resolve('这里放入异步成功返回的结果');
reject('这里放入异步失败的结果');
});
// 成功执行.then,失败执行.catch
promise.then(result => {
console.log(result);
})
.catch(error => {
console.log(error);
})
// 需求:当前请求得到响应后再发起下一个请求
// promise解决回调地狱
function p1() {
return new Promise((resolve, reject) => {
resolve('p1结果已返回');
reject('这里放入异步失败的结果');
});
}
function p2() {
return new Promise((resolve, reject) => {
resolve('p2结果已返回');
reject('这里放入异步失败的结果');
});
}
function p3() {
return new Promise((resolve, reject) => {
resolve('p3结果已返回');
reject('这里放入异步失败的结果');
});
}
p1().then(result => {
console.log(result);
return p2();
})
.then(result => {
console.log(result);
return p3();
})
.then(result => {
console.log(result);
});
// console结果
// p1结果已返回
// p2结果已返回
// p3结果已返回
// -------------async终极方案
// 异步函数默认的返回值是promise对象
// 在异步函数内部使用throw关键字进行错误的抛出,throw执行后,后面的代码不再执行
// 在异步函数内部使用return关键字进行结果返回,结果会被包裹在promise对象中,return代替了resolve方法
// 获取结果也是then和catch
// await关键字
// 它只能在async函数中使用
// await后面只能写promise对象
// await可以暂停异步函数向下执行,直到promise返回结果
async function p1() {
return 'p1结果已返回';
}
async function p2() {
return 'p2结果已返回';
}
async function p3() {
return 'p3结果已返回';
}
async function run() {
let r1 = await p1();
let r2 = await p2();
let r3 = await p3();
console.log(r1);
console.log(r2);
console.log(r3);
}
run();
// console结果
// p1结果已返回
// p2结果已返回
// p3结果已返回
// 以jQuery为例,jQuery的ajax返回值里也有.then和.catch方法,所以可以直接使用async函数进行书写
// 例如:需求:interface1请求收到响应后再发起interface2请求,interface2请求收到响应后再发起interface3请求
// jQuery原始写法:
$.ajax({
url: '/interface1',
success: function (res) {
console.log(res);
$.ajax({
url: '/interface2',
success: function (res) {
console.log(res);
$.ajax({
url: '/interface3',
success: function (res) {
console.log(res);
}
});
}
});
}
});
// async/await写法:
(async function () {
const res1 = await $.ajax({url: '/interface1'});
const res2 = await $.ajax({url: '/interface2'});
const res3 = await $.ajax({url: '/interface3'});
console.log(res1);
console.log(res2);
console.log(res3);
})();