zoukankan      html  css  js  c++  java
  • vue 中使用 async/await 将 axios 异步请求同步化处理

    1. axios 常规用法:

    export default {
      name: 'Historys',
      data() {
        return { 
          totalData: 0,  
          tableData: []
        }
      },
      created () {
        this.getHistoryData()
      },
      methods: { 
        handleClick (tab) {
          let data = {
            status: tab.name,
            name: this.formInline.user,
            cid: this.formInline.identity,
            start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
            end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
          }
          this.getHistoryData()
        },
        // 统一处理axios请求
        getHistoryData (data) { 
          axios.get('/api/survey/list/', {
            params: data
          }).then((res) => {
            console.log(res)
            this.tableData = res.data.result
            this.totalData = res.data.count
          }).catch((err) => {
            console.log(err)
            alert('请求出错!')
          })
        }
      }
    }
    

    2. 使用 asyns/await 将 axios 异步请求同步化:

    2.1 当 axios 请求拿到的数据在不同场景下做相同的处理时:

    export default {
      name: 'Historys',
      data() {
        return { 
          totalData: 0,  
          tableData: []
        }
      },
      created () {
        this.getHistoryData()
      },
      methods: { 
        handleClick (tab) {
          let data = {
            status: tab.name,
            name: this.formInline.user,
            cid: this.formInline.identity,
            start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
            end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
          }
          this.getHistoryData()
        },
        // 统一处理axios请求
        async getHistoryData (data) {
          try {
            let res = await axios.get('/api/survey/list/', {
              params: data
            })
            this.tableData = res.data.result
            this.totalData = res.data.count
          } catch (err) {
            console.log(err)
            alert('请求出错!')
          }
        }
      }
    }
    

    2.2 当 axios 请求拿到的数据在不同场景下做不同的处理时:

    export default {
      name: 'Historys',
      data() {
        return { 
          totalData: 0,  
          tableData: []
        }
      },
      async created () {
        try {
          let res = await this.getHistoryData()
          console.log(res)
          // 等拿到返回数据res后再进行处理
          this.tableData = res.data.result
          this.totalData = res.data.count
        } catch (err) {
          console.log(err)
          alert('请求出错')
        } 
      },
      methods: {  
        async handleClick (tab) {
          let data = {
            status: tab.name,
            name: this.formInline.user,
            cid: this.formInline.identity,
            start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
            end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
          }
          try {
            let res = await this.getHistoryData()
            console.log(res)
            // 等拿到返回数据res后再进行处理
            this.tableData = res.data.result
            this.totalData = res.data.count
          } catch (err) {
            console.log(err)
            alert('请求出错')
          } 
        },
        // 封装axios请求,返回promise, 用于调用getHistoryData函数后作不同处理
        getHistoryData (data) {
          return new Promise((resolve, reject) => {
            axios.get('/api/survey/list/', {
              params: data
            }).then((res) => {
              resolve(res)
            }).catch((err) => {
              reject(err)
            })
          })
        }
      }
    }
    
  • 相关阅读:
    App上线-Unexpected CFBundleExecutable Key
    Java面向对象-001-继承与构造函数
    Java-012-Scanner类和程序异常处理(ExceptionHandle)
    iOS CoreLocation 获取用户当前位置
    Java-011-Java流(Stream)、文件(File)和IO
    Java-010-正则表达式和方法(RegualrExpressionAndMethod)
    Java-009-数组和日期时间类(Date,Calendar)详解
    Java-008-String类、StringBuffer和StringBuilder类
    [vue]vue基础复习项案例stepbystep
    [vue]mvc模式和mvvm模式及vue学习思路(废弃)
  • 原文地址:https://www.cnblogs.com/cckui/p/10444246.html
Copyright © 2011-2022 走看看