vue中axios封装

在Vue.js中使用Axios进行网络请求时，通常会对Axios进行封装，以便在整个应用程序中更轻松地使用和管理网络请求。以下是一个简单的Axios封装示例：

// 引入axios库
import axios from 'axios';

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

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么，例如添加token
    config.headers.Authorization = localStorage.getItem('token');
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么，例如统一处理错误信息
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// 导出封装好的axios实例
export default instance;

在这个示例中，我们首先通过

import axios from ‘axios’;

引入了Axios库，然后使用

axios.create()

方法创建了一个名为instance的Axios实例。我们可以在创建实例时通过配置对象设置一些默认参数，如baseURL、timeout和headers等。

接着，我们通过

instance.interceptors.request.use()

添加了请求拦截器，用于在请求发送之前做一些处理，比如添加请求头信息。在这个示例中，我们通过拦截器为每个请求添加了一个名为Authorization的token。

然后，我们通过

instance.interceptors.response.use()

添加了响应拦截器，用于在收到响应后对数据进行处理。在这个示例中，我们简单地返回了响应数据。

最后，我们通过

export default instance;

将封装好的Axios实例进行导出，以便在Vue.js组件中使用。

在Vue组件中使用这个封装好的Axios实例时，可以直接引入它，并像普通Axios一样使用，例如：

import axiosInstance from '@/utils/axios';

axiosInstance.get('/user').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这样就完成了对Axios的简单封装，并在Vue.js应用程序中使用它进行网络请求。