Este artículo ha participado en el evento "Ceremonia de creación de recién llegados" para comenzar juntos el camino de la creación de oro.

prefacio

En la era actual de separación de front-end y back-end, la asincronía es particularmente importante, y las promesas y async/await utilizadas para resolver problemas asincrónicos también se han vuelto muy importantes en es 6. Este artículo presenta principalmente su uso, que es muy simple y fácil. recordar.

asincrónico

    let a = 0

    setTimeout(() => {
      a = 1
    }, 1000)
    
    console.log(a) // 0
复制代码

En este punto, el retraso se ejecuta de forma asincrónica y el valor de a no ha cambiado a 1 antes de que se use para la salida, y solo podemos obtener 0.

Promesa

A veces tenemos que hacer operaciones asincrónicas, como solicitar datos en segundo plano, y necesitamos tiempo, esperando a que obtenga los datos antes de usarlos.

Es decir, queremos que el contenido asíncrono sea similar al síncrono.

Promise es una solución asíncrona que apareció en es6.

Uso básico de Promise

Se recibe una función en new Promise(), y el parámetro de entrada es resolve,reject
La función en la Promesa se puede ejecutar por cualquier período de tiempo, hasta que la llamada resolve()o reject(), la ponemos aquí para que se ejecute después de un retraso de 1 s, en este momento a se ha asignado a 1, por lo que se puede obtener la a asignada.
resolve()Ingresar .then es ejecutar la devolución de llamada exitosa, e reject()ingresar .catch es ejecutar manualmente el error e ingresar la excepción de captura, que reject()se usa menos.

    let a = 0

    new Promise((resolve, reject) => {
      setTimeout(() => {
        a = 1
        resolve()
      }, 1000)
    })
      .then(() => {
        console.log(a) //1
      })
      .catch(() => {})
复制代码

Promesa de devolución de llamada puede aceptar parámetros de entrada

.thenLa función de devolución de llamada puede tener parámetros de entrada, y los parámetros de entrada se resolve()pasan manualmente, donde res es el valor entrante.
.catchLa relación con reject()y es la misma que las dos anteriores, pero se convierte en una devolución de llamada cuando se detectan errores manualmente .

    let a = 0

    new Promise((resolve, reject) => {
      setTimeout(() => {
        a = 1
        resolve(a)
      }, 1000)
    })
      .then((res) => {
        console.log(res) //1
      })
      .catch(() => {})
复制代码

Las promesas pueden tener devoluciones de llamada continuas

En la primera forma, la función de devolución de llamada acepta y devuelve una nueva Promesa para la próxima devolución de llamada.
La segunda forma es equivalente a new Promise y resolve(res)Promise.resolve(res) cuando res son datos normales
第三种也是最常用的，再异步回调中直接返回普通数据也可当作接受了一个新的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非常方便的使用，想要了解的话，详见：js fetch异步请求使用详解

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

尾言

如果觉得这篇文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

Explicación detallada del uso de js Promise y async/await