js Promise与async/await用法详解

简介: js Promise与async/await用法详解

目录


异步



完全不了解同步异步可以看看这个:一分钟简单理解同步和异步

    let a = 0
    setTimeout(() => {
      a = 1
    }, 1000)
    console.log(a)//0

此时这个延迟就成为异步执行的了,a值还没有变1就被使用输出,我们只能得到0。


Promise



有时候我们不得不进行异步操作,比如从后台请求数据,我们需要时间,等待它得到数据后再使用。


也就是我们希望异步内容也能够类似同步一样。


Promise就是一种es6出现的异步解决方案。


Promise基本使用

new Promise()内接收一个函数,入参为resolve, reject

Promise内的函数将可以执行任意时长,执行到调用resolve()或reject(),我们此处把它放在延迟1s后执行,此时a已经被赋值为1,因此就可以得到被赋值后的a。

resolve()进入.then也就是执行成功回调,reject()进入.catch也就是手动执行错误进入捕获异常,reject()用的较少。

    let a = 0
    new Promise((resolve, reject) => {
      setTimeout(() => {
        a = 1
        resolve()
      }, 1000)
    })
      .then(() => {
        console.log(a) //1
      })
      .catch(() => {})

Promise回调可接受入参

  1. .then中的回调函数可以存在入参,入参为resolve()手动传入,此处res便是传入的a值。(.catchreject()同理)
    let a = 0
    new Promise((resolve, reject) => {
      setTimeout(() => {
        a = 1
        resolve(a)
      }, 1000)
    })
      .then((res) => {
        console.log(res) //1
      })
      .catch(() => {})

Promise可进行连续回调


回调函数中接受返回一个新的Promise进行下一步回调。

Promise.resolve(res)在res为普通数据时等同于new Promise并且resolve(res)

再异步回调中直接返回普通数据也可当作接受了一个新的Promise进行下一步回调

    let a = 0
    new Promise((resolve, reject) => {
      setTimeout(() => {
        a = 1
        resolve(a)
      }, 1000)
    })
      .then((res) => {
        return new Promise((resolve, reject) => {
          resolve(res)
        })
        //等同于
        //return Promise.resolve(res)
        //等同于
        //return res
      })
      .then((res) => {
        console.log(res) //1
      })
      .catch(() => {})

async/await



Promise的回调是可以帮我们解决了异步数据延迟的问题,但是当回调次数过多时,代码将会变得不优雅且异常难以理解,这就是回调地狱问题。


因此es7出现了async/await,用于解决回调地狱问题。


async/await有一个限制就是必须在函数中使用,因此我们将代码包进一个函数,并在函数前加上async,这样我们便可以在函数中使用await关键字。

    const test = async () => {
      let a = 0
      ...
    }
    test()

await用在哪里呢?用在.then回调前的Promise

await后面跟着Promise,而它的返回值便是回调时resolve()传来的值,代替了回调函数,看起来代码一下子就清晰很多了。

    const test = async () => {
      let a = 0
      const res = await new Promise((resolve, reject) => {
        setTimeout(() => {
          a = 1
          resolve(a)
        }, 1000)
      })
      console.log(res) //1
    }
    test()

常见异步请求方法与Promise、async/await的关系



常见异步请求方法有:fetch、jq的ajax、axios等


fetch就是基于Promise设计的,回调的形式进行请求,所以也可以结合async/await非常方便的使用,详见:fetch异步请求使用详解


jq的ajax和axios也是同理,存在回调基本都是基于Promise的,我们只要将.then之前的部分看作Promise放在await后面,用一个变量接收回调结束返回的数据即可。


相关文章
|
10天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
15天前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
22 1
|
10天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
15天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
21 1
|
1月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
16 1
|
1月前
|
JSON 前端开发 JavaScript
探索JavaScript中的Async/Await:简化异步编程的利器
【10月更文挑战第12天】探索JavaScript中的Async/Await:简化异步编程的利器
17 0
|
1月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
15 0
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
65 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。