vue axios 封装请求

Vue中使用Axios发送HTTP请求的常用方式是将Axios封装成Vue插件。

以下是一个简单的Vue Axios封装请求示例：

1. 首先，安装Axios依赖

npm install axios --save

2. 创建一个名为`http.js`的文件，在其中封装Axios并导出

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://localhost:3000/' // 设置请求地址的公共部分
})

// 请求拦截器
http.interceptors.request.use(config => {
  // 可以在请求发送前添加token等信息
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  // 可以对响应结果进行统一处理
  return response.data
}, error => {
  return Promise.reject(error)
})

export default http

3. 将Axios封装成Vue插件，在`main.js`中引入并使用

import Vue from 'vue'
import http from './http'

Vue.prototype.$http = http

4. 在组件中使用

export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data').then(res => {
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

以上就是一个简单的Vue Axios封装请求的示例。通过封装可以使HTTP请求的配置、拦截器等逻辑集中处理，方便进行统一管理和维护。