【async/await】--异步编程最终解决方案

2022-07-02 13:18 520人阅读评论(0)

前言

😎😎欢迎来到我的博客😎😎
📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是🔥 $R e a c t 框架$ 🔥，中间夹杂了一些基础知识的回顾⌨️
🌈博客主页👉codeMak1r.的博客
➕关注👍点赞📂收藏

😇😇本文目录😇😇

前言

🌟async函数

🌟await表达式

🌟async_await结合使用——fs读取文件

🌟async_await结合使用——发送ajax请求

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

🌟async函数

async关键字用来标识一个函数，async关键字标识过的函数为async函数。

函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
async函数与promise.then()方法返回值情况类似

async函数返回值	async函数内部
promise对象，对象的状态为成功，成功的值由async函数内部的返回值决定	一个非promise类型的返回值
promise对象，状态为成功，成功的值为undefined。	没有声明return
promise对象，状态为成功，成功的值为123.	return 123;
promise对象，状态由返回值中的promise对象状态决定对象的值由返回值中的promise对象的值决定	一个promise类型的返回值
promise对象，状态为失败；失败的值为‘error’。	return Promise.reject(‘error’)
promise对象，状态为失败，失败的值为‘Oh NO！’	throw ‘Oh NO!’

<body>
  <script>
    async function main() {
     
      return Promise.reject('error')
    }

    let result = main()
    console.log(result)
  </script>
</body>

打印台显示：

result是一个prmoise类型的对象，状态为失败，值为error。

<body>
  <script>
    async function main() {
     
      throw 'Oh NO!'
    }

    let result = main()
    console.log(result)
  </script>
</body>

打印台显示：

result是一个promise类型的对象，状态为失败，值为‘Oh NO!’。

🌟await表达式

await右侧的表达式一般为promise对象，但也可以是其他的值；
如果表达式是promise对象，await返回的是promise成功的值；
如果表达式是其他值，直接将此值作为await的返回值。

注意⚠️：

await必须写在async函数中，但async函数中可以没有await；

如果await 的promise失败了，就会抛出异常，需要通过try…catch捕获处理。

1、右侧为成功的promise

async function main() {
   
  let p = new Promise((resolve, reject) => {
   
    resolve('Ok')
  })
  let res = await p
  console.log(res)
}

main()

打印台显示：

res结果为：Ok。

2、右侧不是promise类型的值

async function main() {
   
  let p = new Promise((resolve, reject) => {
   
    resolve('Ok')
  })
  let res = await 123
  console.log(res)
}

main()

打印台显示：

res结果为：123。

3、右侧的promise是失败状态

async function main() {
   
  let p = new Promise((resolve, reject) => {
   
    reject('Error')
  })
  try {
   
    let res = await p
    } catch (error) {
   
      console.log(error)
    }
}

main()

打印台显示：

Error。

🌟async_await结合使用——fs读取文件

普通回调函数读取文件操作：

const fs = require('fs');
fs.readFile('./resource/1.txt', (err, data1) => {
   
  if (err) throw err;
  fs.readFile('./resource/2.txt', (err, data2) => {
   
    if (err) throw err;
    console.log(data1 + data2)
  })
})

我们可以看出，这一段代码运用了回调函数的嵌套，一旦读取的文件数量多的话就非常不利于阅读与维护。

于是可以使用promise异步编程解决方法：

const fs = require('fs');

// promise封装读取文件函数
const read = (path) => {
   
  return new Promise((resolve, reject) => {
   
    fs.readFile(path, (err, data) => {
   
      if (err) reject(err);
      resolve(data.toString())
    })
  })
}

// 使用promise.then()方法读取文件
read('./resource/1.txt').then(value => {
   
  console.log(value)
  return read('./resource/2.txt')
}).then(value => {
   
  console.log(value)
}).catch(reason => {
   
  console.warn(reason)
})

使用了promise之后，我们可以用then方法的链式调用，调用读取的文件并将读取结果打印出来。

但是依旧不够简洁，最终的解决方案是使用async_await结合：

const fs = require('fs');
// async与await方式实现
const util = require('util')
// util.promisify转为promise类型的函数
const mineReadFile = util.promisify(fs.readFile)
async function main() {
   
  try {
   
    // 读取文件内容
    let data1 = await mineReadFile('./resource/1.txt')
    let data2 = await mineReadFile('./resource/2.txt')
    // 其实这里await读取文件依旧是异步的，只不过看上去像同步
    console.log(data1 + data2)
  } catch (error) {
   
    console.log(error)
  }
}
main();

util.promisify()方法将API转为promise类型的函数

这里的两行await代码看上去是同步代码，其实其内部依旧是异步读取文件，只不过看上去像是同步的。

🌟async_await结合使用——发送ajax请求

promise.then.catch方法发送ajax请求：

<body>
  <button id="btn">点击发送ajax请求</button>
  <script>
    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)
            }
          }
        }
      })
    }

    const btn = document.getElementById('btn')
		// promise.then.catch写法
    btn.addEventListener('click', function () {
   
      sendAJAX('http://127.0.0.1:8000/server')
        .then(value => {
   
          console.log(value)
        })
        .catch(reason => {
   
          console.log(reason)
        })
    })
  </script>
</body>

async_await写法发送ajax请求：

<body>
  <button id="btn">点击发送ajax请求</button>
  <script>
    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)
            }
          }
        }
      })
    }

    const btn = document.getElementById('btn')
    // async_await写法
    btn.addEventListener('click', async function () {
   
      try {
   
        let result = await sendAJAX('http://127.0.0.1:8000/server')
        console.log(result)
      } catch (error) {
   
        console.log(error)
      }
    })
  </script>
</body>

接收ajax请求的服务器：

server.js

const express = require('express')

const app = express()

app.all('/server', (request, response) => {
   
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  response.setHeader('Access-Control-Allow-Methods', '*')
  response.send('codeMak1r.')
})

app.listen(8000, () => {
   
  console.log('服务已经监听到8000端口...')
})

🎉🎉如果觉得博主的文章还不错的话
➕关注博主👍点赞文章📁收藏文章
✏️原创不易你的支持将会是我最大的动力💪
🧸感谢观看

转载：https://blog.csdn.net/Svik_zy/article/details/125443099

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

【async/await】--异步编程最终解决方案

前言

😇😇本文目录😇😇

🌟async函数

🌟await表达式

🌟async_await结合使用——fs读取文件

🌟async_await结合使用——发送ajax请求

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场