Vue项目中Api的组织和返回数据处理的操作

下面我来详细讲解“Vue项目中Api的组织和返回数据处理的操作”的完整攻略。

1. Api的组织

在Vue项目中，可以把Api统一组织到一个单独的文件夹中，比如api文件夹。在该文件夹下，可以按照不同的模块或功能，再分别创建不同的文件来管理相关的Api，比如user.js用于管理用户相关的Api，product.js用于管理商品相关的Api等。

下面是一个示例，创建了一个api文件夹，并在其中创建了一个user.js文件，用于管理用户相关的Api。

├── api
│   ├── user.js

在user.js文件中，我们可以定义不同的用户相关的Api，并导出供其他组件使用。比如，定义一个getUserInfo方法，用于获取用户信息的Api。

import axios from 'axios'

export function getUserInfo(userId) {
  return axios.get(`/api/user/${userId}`)
    .then(res => {
      return res.data
    })
    .catch(error => {
      throw new Error(error)
    })
}

对于Axios返回的数据，在不同的场景下可能需要做不同的处理，比如在数据请求失败时需要弹出提示框，或需要做一些通用的数据处理等，这也是下面要讲到的内容。

1. 返回数据处理

在Vue项目中处理接口返回的数据时，常用的有以下几种方法：

方式一：直接处理数据

这种方式比较简单，直接在组件内处理返回的数据，比如在响应前先做一些数据处理，比如格式化日期、合并数据等。

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      axios.get('/api/user')
        .then(res => {
          // 对返回的数据进行格式化
          this.userInfo = formatUserInfo(res.data)
        })
        .catch(error => {
          // 处理请求失败
          this.$message.error(error.message)
        })
    },
    formatUserInfo(data) {
      // 对数据进行格式化
      return {
        id: data.id,
        name: data.name,
        age: data.age,
        createDate: moment(data.createDate).format('YYYY-MM-DD')
      }
    }
  }
}

方式二：通过mixin实现通用处理

对于一些通用的数据处理操作，可以使用mixin来实现。比如，在处理请求前把loading显示出来，在请求完成后把loading隐藏起来。

import axios from 'axios'

const loadingMixin = {
  data: function() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
    },
    hideLoading() {
      this.isLoading = false
    }
  }
}

export default {
  mixins: [loadingMixin],
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      this.showLoading()
      axios.get('/api/user')
        .then(res => {
          // 对返回的数据进行处理
          this.userInfo = res.data
        })
        .catch(error => {
          // 处理请求失败
          this.$message.error(error.message)
        })
        .finally(() => {
          this.hideLoading()
        })
    }
  }
}

方式三：封装处理函数实现定制化处理

对于一些需要定制化处理的场景，可以封装处理函数并在组件中使用。比如，在请求Api时需要根据不同的请求码进行不同的处理，那么可以定义一个返回数据处理函数handleResponseData，并在组件中使用。

import axios from 'axios'

export function handleResponseData(res, successCode, errorCallback) {
  // 根据成功码进行处理
  if (res.code === successCode) {
    return res.data
  } else {
    // 请求失败时执行自定义错误处理函数
    errorCallback && errorCallback(res.code, res.msg)
    throw new Error(res.message || '请求失败')
  }
}

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      axios.get('/api/user')
        .then(res => {
          // 对返回的数据进行处理
          this.userInfo = handleResponseData(res, 200, this.handleError)
        })
        .catch(error => {
          // 处理请求失败
          this.$message.error(error.message)
        })
    },
    handleError(code, message) {
      // 处理请求错误
      this.$message.error(message || '请求失败')
    }
  }
}

这样，我们就可以根据具体场景选择不同的处理方式来处理返回的数据了。

以上是Vue项目中Api的组织和返回数据处理的操作完整攻略。