vue中axios二次封装

在Vue中使用axios进行二次封装的步骤如下所示：

第一步，在项目的`apis`文件夹下创建一个`http.js`文件，用于封装axios的请求方法。在该文件中，通过`export`将方法暴露出去，方便在所需页面进行调用。例如，可以创建一个获取用户列表信息的方法`get_users`：

import http from './index.js'

export const get_users = (params) => {
  return http({
    method: "GET",
    url: "users",
    params: params
  })
}

第二步，设置基地址和拦截器。可以使用axios的`create`方法创建一个自定义的axios实例，并在其中设置基地址和拦截器。例如：

import axios from 'axios'

const request = axios.create({
  baseURL: '基地址1',
  timeout: 5000
})

request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

第三步，在页面中引入`http.js`文件，并调用自己所配置好的请求方法。可以使用`import`语句引入`http.js`中暴露的方法，然后在页面的方法中使用`async`和`await`对请求方法进行异步请求，最终可以直接获取到请求的数据信息。例如：

import { get_users } from '../apis/http.js'

export default {
  props: {},
  data() {
    return {}
  },
  created() {
    // 在钩子函数中调用自定义的getUserList方法
    this.getUserList()
  },
  methods: {
    // 自定义方法中调用get_users方法，通过async和await进行异步请求
    async getUserList() {
      // 调用get_users方法并获取请求数据
      let { data: res } = await get_users(params)
      // 在页面上渲染数据
      // console.log(res)
    }
  },
  components: {}
}

这样，在Vue中就可以使用axios进行二次封装，并通过引入和调用自定义的请求方法来获取数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue中axios的二次封装](https://blog.csdn.net/m0_63905956/article/details/125589282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue中axios的二次封装](https://blog.csdn.net/qq_20623665/article/details/128243379)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]