当前位置:首页 » 《我的小黑屋》 » 正文

Javascript——async、await详解

24 人参与  2024年05月08日 16:19  分类 : 《我的小黑屋》  评论

点击全文阅读


一、async、await是什么?

async用于申明一个function是异步的;而await则可以认为是 async await的简写形式,是等待一个异步方法执行完成的。**async函数**通过在函数声明前加上async关键字,可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。

创建一个async函数

async function asyncFunction() {  return "异步操作完成";}asyncFunction().then(value => console.log(value)); // 输出:异步操作完成

await关键字只能在async函数内部使用。它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。
在async函数中使用await

async function asyncFunction() {  let promise = new Promise((resolve, reject) => {    setTimeout(() => resolve("完成"), 1000)  });  let result = await promise; // 等待,直到promise解决 (resolve)  console.log(result); // "完成"}asyncFunction();

二、async/await的特点

1、Async作为关键字放在函数前面,普通函数变成了异步函数2、异步函数async函数调用,跟普通函数调用方式一样。在一个函数前面加上async,变成 async函数,异步函数,return:1,打印返回值,3、返回的是promise成功的对象,4、Async函数配合await关键字使用

错误处理
在async/await中,错误处理可以通过传统的try…catch语句实现,这使得异步代码的错误处理更加直观。

代码示例:使用try...catch处理错误async function asyncFunction() {  try {    let response = await fetch('http://example.com');    let data = await response.json();    // 处理数据  } catch (error) {    console.log('捕获到错误:', error);  }}asyncFunction();

举个?
模拟出一个摇色子的异步操作,先通过一个方法三秒之后拿到一个筛子数,第二步进行输出

//基本用法的async函数let asyncFun = async function(){    return 1}console.log(asyncFun())//会返回一个promise对象//使用场景//摇色子方法function dice(){    return new Promise((resolve,reject)=>{        let sino = parseInt(Math.random()*6+1)  //生成一个1~6之间的随机小数        setTimeout(()=>{            resolve(sino)        },2000)    })}//异步方法 async function text(){     let n= await dice()      //await 关键字后面调用摇色子方法执行完毕之后,才进行变量赋值     console.log("摇出来"+n)  //最后打印出摇出来的数 }text()

三、async/await的优点

1.方便级联调用:即调用依次发生的场景;2.同步代码编写方式:Promise使用then函数进行链式调用,一直点点点,是一种从左向右的横向写法;async/await从上到下,顺序执行,就像写同步代码一样,更符合代码编写习惯;3.多个参数传递:Promise的then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合参数,比较麻烦;async/await没有这个限制,可以当做普通的局部变量来处理,用let或者const定义的块级变量想怎么用就怎么用,想定义几个就定义几个,完全没有限制,也没有冗余工作;4.同步代码和异步代码可以一起编写:使用Promise的时候最好将同步代码和异步代码放在不同的then节点中,这样结构更加清晰;async/await整个书写习惯都是同步的,不需要纠结同步和异步的区别,当然,异步过程需要包装成一个Promise对象放在await关键字后面;5.基于协程:Promise是根据函数式编程的范式,对异步过程进行了一层封装,async/await基于协程的机制,是真正的“保存上下文,控制权切换……控制权恢复,取回上下文”这种机制,是对异步过程更精确的一种描述;6.async/await是对Promise的优化:async/await是基于Promise的,是进一步的一种优化,不过在写代码时,Promise本身的API出现得很少,很接近同步代码的写法

四、async主要来处理异步的操作,

需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。

举个?Vue项目案例

普通案例promise:

methods: {     getLocation(phoneNum) {         return axios.post('/one接口', {             phoneNum         })     },         getFaceList(province, city) {         return axios.post('/two接口', {             province,             city         })     },       getFaceResult () {          this.getLocation(this.phoneNum).then(res => {              if (res.status === 200 && res.data.success) {              let province = res.data.obj.province;              let city = res.data.obj.city;                  this.getFaceList(province, city).then(res => {                        if(res.status === 200 && res.data.success) {                             this.faceList = res.data.obj                        }                  })              }         }).catch(err => {             console.log(err)         })          }}

async/ await案例:

首先把 getFaceResult 转化成一个async 函数,就是在其前面加async, 因为它的调用方法和普通函数的调用方法是一致,所以没有什么问题。然后就把 getLocation 和getFaceList 放到await 后面,等待执行, getFaceResult 函数修改如下:async getFaceResult () {                let location = await this.getLocation(this.phoneNum);                if (location.data.success) {                    let province = location.data.obj.province;                    let city = location.data.obj.city;                    let result = await this.getFaceList(province, city);                    if (result.data.success) {                        this.faceList = result.data.obj;                    }                }            }现在就还差一点需要说明,那就是怎么处理异常,如果请求发生异常,怎么处理? 它用的是try/catch 来捕获异常,把await 放到 try 中进行执行,如有异常,就使用catch 进行处理。完整代码:async getFaceResult () {                try {                    let location = await this.getLocation(this.phoneNum);                    if (location.data.success) {                        let province = location.data.obj.province;                        let city = location.data.obj.city;                        let result = await this.getFaceList(province, city);                        if (result.data.success) {                            this.faceList = result.data.obj;                        }                    }                } catch(err) {                    console.log(err);                }            }

点击全文阅读


本文链接:http://zhangshiyu.com/post/105247.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1