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]

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

相关问题

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的二次封装。

【vue】对axios二次封装

Axios 是一个基于 promise 的 HTTP 库，可以用于发送请求、拦截请求和响应，以及转换请求和响应数据。Vue.js 也是一种流行的 JavaScript 框架，常常用来构建单页面应用（SPA）。在 Vue.js 应用中，我们常常需要使用 Axios 来进行 HTTP 请求，以获取远程数据或发送数据到服务器端。为了方便地使用 Axios，我们可以对其进行二次封装，以使得我们能够更加便捷地使用 Axios，同时也能够在整个应用中统一处理 HTTP 请求和响应的相关逻辑。

对 Axios 进行二次封装的一般步骤如下：

1. 将 Axios 模块导入到Vue项目中：可以通过 npm 安装 axios，然后在 Vue 组件中使用 import 引入 axios 模块。

2. 创建一个 Axios 实例：可以使用 Axios.create() 方法创建一个新的 Axios 实例，并设置一些默认配置，以便于在多个请求中共享。

3. 设置请求拦截器和响应拦截器：可以使用拦截器来添加通用的请求头、处理错误信息、加载进度条等操作。

4. 封装常用的 HTTP 请求方法：可以为常用的 HTTP 请求方法（如 GET、POST、PUT、DELETE 等）创建一个统一的封装函数，以便于在多个组件中共享使用。

5. 统一处理 HTTP 请求和响应的错误：可以通过统一处理 HTTP 请求和响应的错误，避免在每个组件中都要单独处理错误的逻辑。

通过对 Axios 进行二次封装，我们可以使得整个应用的 HTTP 请求和响应逻辑更加简洁、易于维护，同时也能够统一处理错误和异常情况，减少代码冗余。