vue中axios实现同步请求(代码实现iview的table多选框默认选中)

柔情只为你懂 2023-07-13 13:53 6阅读 0赞

实现同步重点在于添加async、await，且后台请求方法与调用者都需要添加，也就是添加两组，经测试单独添加任何一组都无效

axios封装的请求， user.js

import axios from '@/libs/api.request'
    
    export const getAllUser = (data) => {
      return axios.request({
        url: 'user/mgt/getAllUser',
        method: 'post',
        data: data
      })
    }

方法调用与同步请求

import { getAllUser } from '@/api/user'
    
    // 方法调用
    async getList(){
      let _this = this
      await getAllUser({
        queryParams: JSON.stringify(this.search),
        type: 1
      }).then(res => {
        debugger
        let { data, total } = res.data.data
        this.list = {
          data: data,
          total: total,
          loading: false
        }
      }).catch(err => {
        console.log(err)
      })
    },
    
    // 调用getList方法
    async showModal (name, userIds, userNames) {
            this.modal.visible = true
            this.selectData.ids = userIds
            this.selectData.alias = userNames
            await this.getList(userIds)
            debugger
            let users = []
            if (userIds && this.list.data) {
              users = userIds.split(",")
              users.forEach((item, index, users) => {
                for (let i=0;i<this.list.data.length;i++) {
                  debugger
                  if (this.list.data[i].id === item) {
                    this.$refs.table.$refs.tbody.objData[i]._isChecked = true;
                  }
                }
              })
            }
          },

说明：因为需要getList()方法执行完成之后才允许执行let users = \[\]之后的代码，所以getList()必须要加同步，代码中debugger调试后会发现先执行完axios请求并且从服务器返回数据之后才执行下面的代码