vue2 axios二次封装使用

在Vue2中，对axios进行二次封装的方法如下：

1. 首先，安装axios和VueAxios依赖：

npm install axios vue-axios --save

2. 在main.js中导入并使用VueAxios：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3. 创建一个api.js文件，用于封装axios请求：

import axios from 'axios'

// 设置axios的默认配置
axios.defaults.baseURL = 'http://api.example.com'
axios.defaults.timeout = 5000

// 创建一个axios实例，并设置拦截器
const instance = axios.create({
  baseURL: axios.defaults.baseURL,
  timeout: axios.defaults.timeout
})
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)
instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

// 封装具体的请求方法
export const getData = params => {
  return instance.get('/data', { params })
}

export const postData = data => {
  return instance.post('/data', data)
}

4. 在需要使用的组件中引入api.js，并通过调用封装的方法发送请求：

import { getData, postData } from './api.js'

export default {
  methods: {
    fetchData() {
      getData({ id: 1 })
        .then(response => {
          // 处理返回的数据
        })
        .catch(error => {
          // 处理请求失败的情况
        })
    },
    postData() {
      postData({ name: 'example' })
        .then(response => {
          // 处理返回的数据
        })
        .catch(error => {
          // 处理请求失败的情况
        })
    }
  }
}