【ES8】异步代码终极解决方案 async 和 await
程序员文章站
2022-03-07 12:44:36
文章目录1. async 和 await2. async 函数3. await 表达式4. async与await结合发送ajax的例子资料1. async 和 awaitasync 和 await 两种语法结合可以让异步代码像同步代码一样async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise2. async 函数async函数返回值为promise对象promise对象的结果由async函数执行的返回值决定async...
1. async 和 await
async
和 await
两种语法结合可以让异步代码像同步代码一样async
和await
关键字让我们可以用一种更简洁的方式写出基于Promise
的异步行为,而无需刻意地链式调用promise
2. async 函数
-
async
函数返回值为promise
对象 -
promise
对象的结果由async
函数执行的返回值决定
async function fn() {
// 1. 返回结果不是一个Promise类型的对象,返回的结果就是成功的Promise对象
// return 'yk'; // Promise {<resolved>: "yk"}
// return; // Promise {<resolved>: undefined}
// 2. 抛出错误,返回的结果是一个失败的Promise
// throw new Error('出错'); // Promise {<rejected>: Error: 出错
// 3. 返回一个Promise
return new Promise((resolve, reject) => {
// resolve('成功的数据');
reject('失败的数据');
})
}
const result = fn();
console.log(result);
result.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
})
3. await 表达式
[返回值] = await 表达式;
-
await
必须写在async
函数中,但是async函数中可以没有await -
await
右侧的表达式一般为promise
对象,也可以是其他值 -
await
返回的是promise
成功的值,如果是其他值就返回此值 -
await
的promise
失败了,就会抛出异常,需要通过try-catch
捕获处理
const promise = new Promise((resolve, reject)=> {
// resolve('成功的值');
reject('失败的数据');
})
async function main(){
try {
let result = await promise;
console.log(result); // 成功的值
} catch(e){
console.log(e); // 失败的数据
}
}
main()
4. async与await结合发送ajax的例子
function sendAjax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
}
// then
sendAjax('https://api.apiopen.top/getJoke').then(value=>{
console.log(value);
}, reason => {
})
// async await
async function sendmsg() {
let daunzi = await sendAjax('https://api.apiopen.top/getJoke');
console.log(daunzi)
}
sendmsg();
资料
尚硅谷Web前端ES6教程
尚硅谷Promise教程
尚硅谷Web前端Promise教程从入门到精通
阮一峰es6教程
MDN async_function
MDN await
本文地址:https://blog.csdn.net/weixin_44972008/article/details/114262960