vue接口异步请求

简介: vue接口异步请求

image.pngimage.png

 // 查列表
    async getlist (pageIndex) { 
      let data = { 
        pageIndex,
        pageSize: this.pageSize
      }
      await getCouponPageList(data).then(res => {
        const { data: { code, msg, data } } = res
        if (code === 0) {
          data.list.forEach(v => {
            v.totalAmount = ''
            v.buyerPayAmount = ''
          })
          this.tableData = data.list
          data.list.forEach(async (ele, index) => {
            if (ele.status === this.$t('已使用')) {
              let temp = await this.couponGetAlipay(ele.billDetails)
              ele.totalAmount = temp.totalAmount / 100
              this.tableData[index] = ele
            }
          })
          this.dataCount = data.total
        } else {
          this.$Message.error(msg)
        }
        this.loading = false
      }).catch(err => {
        console.log(err.message)
      })
    },
    // 根据id查列表的后几项
    couponGetAlipay (orderNo) {
      return new Promise((resolve, reject) => {
        couponGetAlipay({orderNo}).then(res => {
          const { data: { code, data } } = res
          if (code === 0) {
            resolve(data)
          }
        }).catch(err => {
          console.log(err.message)
        })
      })
    },

其他方法:

一:

getData: async function() { // 同步方法
  try { // 顺序请求
    await this.getSetupList();
    await this.getRoleList();
    await this.getList();
  } catch (e) {}
}

二:

login: function(code) { // 定义方法
  return new Promise((resolve, reject) => {
    console.log(code)
    getThirdOpenid({ code: code }).then(response => { // 请求接口
      console.log(response)
      return response // 正确返回
    }).catch(res => {
      reject('获取失败') // 错误返回
    })
  })
}
login(code).then(res => { // 调用同步方法
  // 返回正确的操作
 }).catch(res => {
  // 返回错误的操作
})

三:

function login(code) {
  return new Promise((resolve, reject) => { // 同步方法
    getData1().then(response => { // 方法一
      return response // 返回正确值
    }).then((res) => {
      getData2().then((response) => { // 方法一返回正确后执行方法二
        return response // 返回正确值
      }).then((res) => {
        getData3().then(response => { // 方法二返回正确后执行方法三
          return response // 返回正确值
        }).then(res => {
          getData4().then(response => { // 方法三返回正确后执行方法四
            resolve(response ) // 方法执行完毕,抛出最后结果或进行某些操作
          }).catch(res => {
            reject('方法四返回错误')
          })
        }).catch(res => {
          reject('方法三返回错误')
        })
      }).catch(res => {
        reject('方法二返回错误')
      })
    }).catch(res => {
      reject('方法一返回错误')
    })
  })
}
相关文章
|
5天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
45 1
|
15天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
11天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
41 3
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1066 0
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
47 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
33 1

热门文章

最新文章