异步操作——async、await的用法

本文介绍了JavaScript中异步操作的关键特性async和await。通过async关键字,可以将一个普通函数转化为异步函数,而await则用于等待异步操作完成。使用它们能简化异步代码,使其更接近同步代码的书写风格。async/await优点包括易于阅读、顺序执行、参数处理灵活等。在实际应用中,例如在Vue项目中处理异步HTTP请求时,async/await能有效管理步骤间的依赖,提高代码可读性和维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

async:用于申明一个异步的function。
await async和await的简称 用于等待一个异步函数的完成

具体用法:
async:在一个函数前面加上一个单词 async,这就把一个普通函数变成了异步函数。如:

//基本用法的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 dice()先执行,等到三秒后执行完再把得到的结果赋值给左边的n,也就是说test函数需要三秒钟才执行完成,所以test函数是异步的,因此前面必须写async。

为什么要使用async、await?

  • 可以简化异步操作啊,使用他们可以让我们的代码看起来更像是同步的
  • 当有很多个promise对象的时候,我们只想要最终的结果,这时候就需要async和await了

async、await的优点:

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

具体的使用场景
async主要来处理异步的操作,
需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。

vue项目案例:(封装http请求)

http.js:


'use strict'
 
import axios from 'axios'
import qs from 'qs'
 
axios.interceptors.request.use(config => {
  // loading
  return config
}, error => {
  return Promise.reject(error)
})
 
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})
 
function checkStatus (response) {
  // loading
  // 如果http状态码正常,则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的数据,可以直接 return response.data
  }
  // 异常状态下,把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  }
}
 
function checkCode (res) {
  // 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
  if (res.status === -404) {
    alert(res.msg)
  }
  if (res.data && (!res.data.success)) {
    alert(res.data.error_msg)
  }
  return res
}
 
export default {
  post (data,url) {
    return axios({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: 'https://cnodejs.org/api/v1',
      url,
      params, // get 请求时带的参数
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}


api.js

export default {
  getCode: 'http://127.0.0.1:8888/.....'
}

page.vue:

import http from '../../utils/http'
import api from '../../utils/api'
 
   methods: {
      fetchData: async function () {
        var that = this
        var code = Store.fetchYqm();
        let params = {
          inviteCode: code
        }
        const response = await http.post(params,api.getCode)
         var resJson = response.data;
        
      }
}

总之async、await的特点就是:

  1. async 关键字放到一个函数前面,这样就把一个普通函数变成了异步的了。
  2. async声明后的函数,调用方式跟原来普通函数的一样。
  3. async后会返回一个promise对象。
  4. async一般都 配合 await(阻塞代码向下执行)使用,是异步的、阻塞的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值