async,await和promise的关系

1,162 阅读1分钟

Promise是什么

抽象表达:Promise 是JS中进行异步编程的新的解决方案(旧的是谁?=> 纯回调的形式)

具体表达:

①从语法上来说:Promise 是一个构造函数

②从功能上来说:Promise 对象用来封装一个异步操作并可以获取其结果

2.2 Promise 的状态改变(三种状态pending=>resolved,变为rejected)

pending 变为 resolved pending 变为rejected 一个 Promise 对象只能改变一次,无论变成成功还是失败,都会有一个结果数据

写一个普通的promise

    getData(count) {
      return new Promise((resolve, reject) => {
        if (count % 2 === 0) resolve(1)
        else reject(2)
      })
    }
    
    //通过.then调用它
    this.getData(2).then((res) => {
      console.log(res)
    })

此时日志中打印成功的结果 image.png 使用async和await(解决回调地狱的终极方案)

  async created() {
    const data = await this.getData(2)
    console.log(data)
  },
  methods: {
    getData(count) {
      return new Promise((resolve, reject) => {
        if (count % 2 === 0) resolve('成功')
        else reject('失败')
      })
    },
  },
  //打印结果成功

但是如果我们把count值换成reject的结果的话,此时浏览器就会报错,因为我们并没有对错误的结果进行处理 image.png 此时就需要用到try和catch

 async created() {
    //try包裹成功的结果,catch包裹失败的结果
    try {
      const data = await this.getData(1)
      console.log(data)
    } catch (e) {
      console.log(e)
    }
  },

以上的代码 我们await后面跟的都是一个promise对象,如果await后面不是promise对象呢?

    const resolve1 = await 100
    console.log(resolve1)
    //其实此时内部已经帮我们把await后面封装成了一个Promise对象
    //等同于 const resolve1 = await Promise.resolve(100)