vue2 中的axios二次封装

在Vue2中，可以通过以下步骤对axios进行二次封装：

1. 创建一个axios实例，并进行一些全局配置，比如设置请求的基础URL、设置请求头等。可以在一个单独的文件中创建这个实例，比如`axios.js`。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头
  },
});

export default instance;

2. 在需要发送请求的地方引入这个axios实例，并使用它发送请求。

import axios from '@/axios';

axios.get('/api/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

这样，你就可以在项目中使用这个经过二次封装的axios实例来发送请求了。这种方式可以让你在多个地方使用相同的配置和拦截器，提高了代码的复用性和可维护性。[1]

希望这个回答对你有帮助！如果还有其他问题，请随时提问。

相关问题

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 ]

vue3的axios二次封装

在Vue 3中，可以通过创建一个单独的axios实例来进行二次封装。以下是一个示例代码：

// 创建axios实例
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置接口的基本url
  timeout: 5000 // 设置请求超时时间
})

// 设置请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送前可以做一些处理，比如添加token等
    // ...
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 设置响应拦截器
instance.interceptors.response.use(
  response => {
    // 在响应成功后可以做一些处理，比如对响应数据进行转换等
    // ...
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

在上面的示例中，我们通过`axios.create`方法创建了一个axios实例，并设置了一些基本的配置项。然后通过`interceptors`设置了请求和响应的拦截器，在拦截器中可以对请求和响应进行一些处理，比如添加token、转换数据等。

在Vue组件中，可以直接引入该axios实例并使用，如下所示：

import axios from '@/utils/axios'

export default {
  setup() {
    axios.get('xxx').then((res) => {
      console.log(res)
    })
  }
}

这样就完成了Vue 3中axios的二次封装。