博客

vue2项目中全局封装axios问题

  • Post category:http

在Vue2项目中，我们可以通过全局封装Axios来进行统一的网络请求处理，这样可以减少代码重复，方便维护。下面是实现全局封装Axios的完整攻略：

1. 安装Axios

在Vue2项目中，我们需要先安装Axios依赖：

npm install axios --save

2. 创建Axios实例

我们需要创建一个Axios.js文件，用于创建一个Axios实例并进行全局配置：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000', // API的基础url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

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

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;

3. 注册为Vue插件

我们需要在main.js中注册Axios为Vue插件：

import Vue from 'vue';
import axios from './Axios';

Vue.prototype.$http = axios;

4. 在Vue组件中使用

在Vue组件中，我们可以通过this.$http调用全局配置的Axios实例进行网络请求：

export default {
  name: 'Example',
  methods: {
    async fetchData() {
      try {
        const res = await this.$http.get('/api/data');
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    }
  }
};

示例一：使用Axios发送POST请求

下面是一个示例，展示如何在Vue组件中使用全局封装的Axios发送POST请求：

export default {
  name: 'Example',
  methods: {
    async postData() {
      try {
        const res = await this.$http.post('/api/data', {
          name: 'Bob',
          age: 20
        });
        console.log(res);
      } catch (error) {
        console.error(error);
      }
    }
  }
};

示例二：在Axios拦截器中添加Token

我们可以在Axios拦截器中添加Token用于验证。比如，我们在请求头中添加Authorization字段来传递Token：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000', // API的基础url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

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

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;
Tags: