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

相关推荐
啃火龙果的兔子15 分钟前
CSS 预处理器(Preprocessor)和后处理器(Postprocessor)
前端·css
懋学的前端攻城狮17 分钟前
JavaScript作用域与闭包深度解析:从原理到实战
前端·javascript
晓得迷路了21 分钟前
栗子前端技术周刊第 92 期 - TypeScript 5.9、pnpm 10.14、Vite 下载量超 Webpack...
前端·javascript·vite
我不吃饼干8 小时前
在 React 中实现倒计时功能会有什么坑
前端·react.js
小小小小宇9 小时前
前端PerformanceObserver
前端
王者鳜錸9 小时前
PYTHON从入门到实践-18Django从零开始构建Web应用
前端·python·sqlite
拾光拾趣录9 小时前
ES6到HTTPS全链路连环拷问,99%人第3题就翻车?
前端·面试
haaaaaaarry10 小时前
Element Plus常见基础组件(二)
开发语言·前端·javascript
xyphf_和派孔明10 小时前
关于echarts的性能优化考虑
前端·性能优化·echarts
PyHaVolask10 小时前
HTML 表单进阶:用户体验优化与实战应用
前端·javascript·html·用户体验