Vue项目简单封装axios

(一)配置代理服务器

在vue.config.js文件中

devServer: {
    // 开启代理服务器 
    proxy: {
      '/tasks': { //匹配所有以/tasks开头的请求路径
        target: 'http://localhost:5000', // 代理目标的基础路径
        pathRewrite: { '^/tasks': '' },
        ws: true,
        changeOrigin: true
      }
    }
  }

(二)创建框架结构

1.$http.js文件用于配置axios

// 该文件用于配置axios
import axios from "axios"

// 设置请求超过时间 10s
axios.defaults.timeout = 1000 * 10

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 设置公共路径
axios.defaults.baseURL = 'http://localhost:8080'

// 添加请求拦截器
axios.interceptors.request.use(
    (config) => {
        console.log(config)
        // 这里写发送请求后的操作
        return config
    },
    (err) => {
        console.log(err)
        // 这里写对请求错误执行的操作
        return Promise.reject(error)
    }
)

// 添加响应拦截器
axios.interceptors.response.use(
    (config) => {
        console.log(config)
        // 这里写响应请求后的操作
        return config
    },
    (err) => {
        console.log(err)
        // 这里写对响应错误执行的操作
        return Promise.reject(error)
    }
)

export default axios

2.base.js用于存储配置的多个baseURL

// 该文件用于存储配置的多个baseURL
const base = {
    tasks: 'http://localhost:8080'
}
export default base

3.apis.js用于集中存储项目中所有需要的接口请求

// 该文件用于集中存储项目中所有需要的接口请求
import axios from "./$http"
import base from "./base"

const apis = {
    // 接收数据
    get() {
        return axios.get(`${base.tasks}/tasks/get`)
    },
    // 发送数据
    save(tasks = []) {
        return axios.post(`${base.tasks}/tasks/save`, {
            tasks
        })
    }
}
export default apis

(三)实现全组件可用

将apis挂载到vue原型上

main.js文件：

import apis from './request/apis'
// 将封装好的apis挂载到Vue原型上
Vue.prototype.$apis = apis