Promise

151 阅读2分钟

Promise的由来

Promise

promise 是一个方便异步操作的内置对象; 通过new 创建实例,注意Promise构造函数接受一个函数此函数有两个形参reslve,reject来改变其实例的state状态:reject将其state改为reject失败,reslve将其改变成fulfid。 当状态发生改变后通过.THEN方法执行不同状态的回调。

new Promise((reslve, rejevet) => {
      setTimeout(() => {
        let a = 1
        // reslve => 状态为fufild,并且将result赋值a
        reslve(a)
      }, 1000)
    })

Promise的属性

1.state -- 状态:

默认值为padding等待;fufild:已完成;reject:已拒绝

1.2 改变状态 通过reslve,reject可以改变状态并且可以传递参数给结果,注意状态只能改变一次。

  1. 结果:装着异步操作存储的结果

Promise的关键方法

  1. .then(): .then是对实例不同状态执行不同的回调的方法,其有两个参数:一个参数为state == fufild时的回调其第一个参数可以获取reslve(value)的value。第二个参数为state == reject的回调,但通常使用.catch来代替第二个回调

.then的返回值时为一个Promise对象此对象默状态为Padding: 我们可以连续的.then((res)=>{})获取上级Promise对象成功时的结果,这样在回调中再次创建一个Promise对象发起新的异步请求时就可以使用父级异步请求的值作为依赖解决回调地狱的问题。

 let c = new Promise((reslve, reject) => {
      setTimeout(() => {
        reslve(Math.random())
      }, 1000)
    })
      .then((res) => {
      // return可以将.then的返还的新实例状态改为fufild
      // return 一个新实例时下方的.then会将其当为调用对象。
        return new Promise((reslve, reject) => {
          setTimeout(() => {
            reslve(100 + res)
          }, 1000)
        })
      })
      // 
      .then((res) => {
        console.log(res)
      })
      

当我们链式调用.then时除了起始的.then指向本身;后续的.then都指向了其上方的Promise实例

1.2 async awite Promise的语法糖,async声明的函数内使用配合await堵塞异步操作实现同步异步操作。

其await相当于省略了.then方法并且将结果返回出去; 其结果可以使用变量接收,由于在同域下这个变量可供下一个await函数使用

  function one () {
    console.log(1)
  }
  function two () {
    setTimeout(() => {
      console.log(2)
    }, 1000)
  }
  function three () {
    setTimeout(() => {
      console.log(3)
    }, 2000)
  }
  async function fn1 () {
    one()
    await two()
    await three()
  }
  fn1()