promise ES6提出
用于解决异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
new Promise((resolve, reject) => {
$ajax({
url: _url,
success:function(ret) {
// 成功回调
resolve(ret);
},
error: function(err) {
// 失败回调
reject(err)
}
});
}).then(ret => {
// 处理成功数据
// code ......
}).catch(err => {
// 错误处理
// code ......
})
这样完美解决了ajax的回调地狱问题。
async、await ES7提出
优化ES6异步编程的解决方案，比ES6 Promise更加优美。
function async(_url) {
return new Promise((resolve, reject) => {
$ajax({
url: _url,
success:function(ret) {
// 成功回调
resolve(ret);
},
error: function(err) {
// 失败回调
reject(err)
}
});
});
}
async function fetchData() {
const ret = await async('/api/getList');
}
// 使用
fetchData();
注意：
1、async 会返回一个Promise对象，并且是resolved状态，这意味着这个对象状态不可再改变（不了解请看我的Promise学习笔记）。
2、await 它会等待后面的表达式或者Promise对象执行完成才会执行后面的语句（仅限于await对应的函数中）。
3、await 它可以等任意表达式的结果。
4、如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西，并且不会阻塞后面的代码运行。
5、如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。
6、await必须放在async函数中。
总结：Promise解决了异步回调地狱问题，而async、await是对Promise的升华，进一步提升了Promise的强大。
下面给点干货自己去体会
1、有层次的发起请求
let status = 1;
let userLogin = (resolve, reject) => {
setTimeout(() => {
if (status == 1) {
resolve({
data: '登录',
msg: 'xxx',
token: 'xxx'
});
} else {
reject('请求失败');
}
}, 2000);
}
let userInfo = (resolve, reject) => {
setTimeout(() => {
if (status == 1) {
resolve({
data: '用户信息',
msg: 'xxx',
token: 'xxx'
});
} else {
reject('请求失败');
}
}, 2000);
}
new Promise(userLogin).then(res => {
console.log(res); // 登录成功
return new Promise(userInfo); // 登录成功后再请求获取用户信息
}).then(ret => {
console.log(ret); // 得到用户信息
})
2、对于Promise的理解
async function test() {
console.log('1');
await new Promise((resolve, reject) => {
setTimeout(() => {
console.log('2')
resolve();
}, 1000);
})
console.log('3');
}
test();
console.log('4');
// 1、4、2、3
3、最近很火的一道面试题
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1();
new Promise(function (resolve) {
console.log('promise1')
resolve();
}).then(function () {
console.log('promise2')
})
console.log('script end')
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
4、对于async函数的理解
async function testAsync() {
return "hello async";
}
const result = testAsync();
console.log(result); // Promise {<resolved>: "hello async"}
5、对于async和await的理解
function takeLongTime() {
return new Promise(resolve => {
return setTimeout(() => resolve("long_time_value"), 1000);
});
}
async function test() {
console.log('1');
const v = await takeLongTime();
console.log(v);
console.log('2');
}
test(); // 1、long_time_value、2
6、区别async和Promise
async function async() {}
const async1 = new Promise((resolve,reject) => {})
console.log(async()); // Promise {<resolved>: undefined}
console.log(async1); // Promise {<pending>}
注意：async返回的Promise对象已经是resolved状态
