Promise结合axios的使用

一、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出去就是这个函数返回的值了。可以直接使用。

相关推荐
siroi2 分钟前
【nginx】NJS 的简单实践
前端
饮水机战神4 分钟前
震惊!多核性能反降11%?node接口压力测试出乎意料!
前端·node.js
一只叁木Meow5 分钟前
JavaScript数学库深度对比
前端
顾辰逸you7 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛21 分钟前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin22 分钟前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger28 分钟前
Trae Solo模式生成一个旅行足迹App
前端·javascript
zhangbao90s29 分钟前
Intl API:浏览器原生国际化API入门指南
前端·javascript·html
艾小码31 分钟前
构建现代前端工程:Webpack/Vite/Rollup配置解析与最佳实践
前端·webpack·node.js
跟橙姐学代码36 分钟前
Python 集合:人生中最简单的真理,只有一次
前端·python·ipython