async/await

1)async返回一个promise对象

 methods: {
   async testAsync () {
     return "hello async"
   }
 },
 mounted () {
   const result = this.testAsync();
   console.log(result);
 }

在这里插入图片描述

2)async的内容靠.then输出

methods: {
  async testAsync () {
    return "hello async"
  }
},
mounted () {
  this.testAsync().then(res => {
    console.log(res)
  })
}

在这里插入图片描述

3)await在等待async函数的返回值
如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。

methods: {
  axios1 () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let abc = '我是5000接口一'
        resolve(console.log(abc))
      }, 5000)
    })
  },

  axios2 () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let abc = '我是3000接口二'
        resolve(console.log(abc))
      }, 3000)
    })
  },

  axios3 () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let abc = '我是1000接口三'
        resolve(console.log(abc))
      }, 1000)
    })
  },
  async yibu () {
    await this.axios1() // 成功之后再执行后面的代码
    this.axios2()
    this.axios3()
  }
},
mounted () {
  this.yibu()
}

在这里插入图片描述
在这里插入图片描述

### Async/Await 的使用场景及其实现机制 #### 使用场景 Async/Await 是 JavaScript 中处理异步操作的强大工具,广泛应用于需要简化异步代码逻辑的场景。以下是其常见使用场景: 1. **API 请求**:在前端开发中,通常需要通过 `fetch` 或 `axios` 等库发起 HTTP 请求获取数据。使用 Async/Await 可以使代码更简洁、可读性更高[^4]。 ```javascript async function fetchData(url) { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); } } ``` 2. **数据库操作**:在 Node.js 后端开发中,与数据库交互的操作通常是异步的。Async/Await 能够帮助开发者以同步的方式编写这些异步操作[^2]。 ```javascript async function getUserById(id) { try { const user = await db.query(`SELECT * FROM users WHERE id = $1`, [id]); return user; } catch (error) { console.error('Error querying database:', error); } } ``` 3. **文件读写**:Node.js 提供了许多异步的文件系统操作方法。使用 Async/Await 可以避免回调地狱并提高代码可维护性[^4]。 ```javascript const fs = require('fs').promises; async function readFile(filePath) { try { const data = await fs.readFile(filePath, 'utf8'); return data; } catch (error) { console.error('Error reading file:', error); } } ``` #### 实现机制 Async/Await 的实现基于 Promise,其底层机制可以分为以下两部分: 1. **Async 函数**:当一个函数被声明为 `async` 时,它会返回一个隐式的 Promise 对象。如果函数内部没有显式返回 Promise,则会自动将返回值包装为一个已解决的 Promise[^4]。 ```javascript async function asyncFunction() { return 'Hello World'; } asyncFunction().then(value => console.log(value)); // 输出: Hello World ``` 2. **Await 表达式**:`await` 关键字只能用于 `async` 函数内部,用于暂停当前函数的执行,直到指定的 Promise 被解决或拒绝。一旦 Promise 完成,`await` 将返回其结果[^1]。 ```javascript async function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function testDelay() { console.log('Start'); await delay(1000); console.log('End after 1 second'); } testDelay(); ``` 此外,Async/Await 内部按照顺序调用 `await` 表达式,确保每个异步任务按顺序完成[^3]。 #### 错误处理 Async/Await 的错误处理可以通过 `try...catch` 块实现,这种方式比传统的 `.catch()` 方法更加直观和易于理解[^2]。 ```javascript async function handleErrorExample() { try { const result = await someAsyncOperation(); console.log(result); } catch (error) { console.error('An error occurred:', error); } } ``` ### 注意事项 1. Async/Await 不会改变异步操作的本质,只是提供了更简洁的语法[^4]。 2. 在需要并行执行多个异步任务时,应结合 `Promise.all` 使用,而不是简单地串联多个 `await`[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值