欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【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

asyncawait 两种语法结合可以让异步代码像同步代码一样
asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise

2. async 函数

  1. async函数返回值为promise对象
  2. 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 表达式;

  1. await 必须写在async函数中,但是async函数中可以没有await
  2. await 右侧的表达式一般为 promise 对象,也可以是其他值
  3. await 返回的是promise成功的值,如果是其他值就返回此值
  4. awaitpromise失败了,就会抛出异常,需要通过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

相关标签: JavaScript js