Promise结合axios的使用

sunny3272025-04-28 15:56

一、Promise的返回值

Promise有三种状态：pendding fullfilled reject

二、Promise与axios一起使用时的注意事项

1、如果需要axios调用接口后的返回值

这种情况是需要调用接口后的返回值，则需要return 一个axios ,然后在axios中的then函数中return接口返回的值。代码如下：

js 复制代码

async adjBalFn(schemaGuid) {
      let params = {
        agencyCode: this.agencyCode,
        balanceKey: [],
        fisPerd: this.date.includes('0') ? Number(this.date.split('0')[1]) : Number(this.date),
        schemaGuid
      }
      this.$showLoading()

//这里return 一个axios
      return this.$axios
        .post('/XXXX/api', params)
        .then(result => {
          if (result.data.flag == 'success') {
            this.$hideLoading()
            // 这里再把axios接口返回的值再return出去
            return result.data.data
            // return Promise.resolve(111)
          } else {
            this.$hideLoading()
            this.$message.error(result.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
          this.$hideLoading()
        })
    }

使用时这样使用：

js 复制代码

let res = await this.adjBalFn(adjBalList[i].schemaGuid)
//在这个判断条件上直接使用res，它即为一个对象，这里是判断返回值是否是空对象
if (Object.keys(res).length === 0) {
  this.$message.error('当前期间余额调节表还未生成，请确认生成后进行归档！')
  adjBalFlag = false
  break
}

解释： return this.$axios是返回一个Promise，然后promise的值是result.data.data

2、也可以最外层return new Promise，然后在里面再resolve出去

js 复制代码

async adjBalFn(schemaGuid) {
      let params = {
        agencyCode: this.agencyCode,
        balanceKey: [],
        fisPerd: this.date.includes('0') ? Number(this.date.split('0')[1]) : Number(this.date),
        schemaGuid
      }
      this.$showLoading()
      //在这里return new Promise   ，然后再在里面resolve出去
      return new Promise(resolve => {
        this.$axios
          .post('/gl/bank/getRecon', params)
          .then(result => {
            if (result.data.flag == 'success') {
              this.$hideLoading()

              //在这里再resolve出去
              resolve(result.data.data)
            } else {
              this.$hideLoading()
              this.$message.error(result.data.msg)
            }
          })
          .catch(error => {
            this.$message.error(error)
            this.$hideLoading()
          })
      })

    }

使用时这样使用：

js 复制代码

this.adjBalFn(adjBalList[i].schemaGuid).then(res => {
  console.log('res: ', res)
  if (Object.keys(res).length === 0) {
    this.$message.error('当前期间余额调节表还未生成，请确认生成后进行归档！')
    adjBalFlag = false

    break
  } 
})
需要在then中接收到返回值 ，然后再使用。

解释：这里在最外层包裹一个new Promise 等于是一个大的promise了，直接resolve出去就是这个函数返回的值了。可以直接使用。