Vue实现封装axios，配置get，post，put等多种请求方式,并且实现全局接口调用

前言：鄙人前端开发三年，做了不少项目了，我发现我参与的大部分项目没有对请求接口参数这块进行配置，每次请求接口都得引入文件，挨个配置参数等，感觉太繁琐了，后面我就自己配置了下，在这做个记录，也给大伙分享一下。

1. 我们在 src 文件夹下，创建一个名为“commom”文件夹，再在该文件夹下创建三个 js 文件，分别为api.js（该文件写我们的接口），http.js（该文件配置请求方式 post，get，put 等），common.js（该文件写添加全局属性或方法）。

2. 在 http.js 文件中，我们可以这样配置：

//http.js 文件
import axios from 'axios'
import api from "./api";
import Message from 'element-ui';
// 数据引入
let instance = axios.create({
  timeout: 20000
  // withCredentials: true,// 跨域请求时是否携带凭证信息（如 cookies 和 HTTP 认证信息）。这个选项的默认值是 false。})

// 配置请求时的拦截器
instance.interceptors.request.use(config=> {// 该处写我们的逻辑代码...}
)

// 配置响应时的拦截器
instance.interceptors.response.use(response => {
    // 比如约定 code === 1417 时，token 过期，code 为 1001 时，登录失效。if (response.data.code === 1417) {// 此处写我们的逻辑代码....} else if (response.data.code === 1001) {Message.error('登录信息已过期, 请重新登录')
      window.sessionStorage.clear();

     // 重新登录
      window.location.href = "http://xxxx.xx.login";
    }
    return response && response
  }
)
// 下面为配置我们的请求方式，post，get，put，等
export default {post(url, data, params) {
    return instance({
      headers: {'token': sessionStorage.getItem('token'),
        'Content-Type': 'application/json'
      },
      method: 'post', // 请求协议
      url: url, // 请求的地址
      data: JSON.stringify(data), // post 请求的数据
      params,
      timeout: 30000 // 超时时间, 单位毫秒
    }).then((res) => {return res.data}
    )
  },
  get(url, params) {
    return instance({
      headers: {'token': sessionStorage.getItem('token')
      },
      method: 'get',
      url: url,
      params, // get 请求时带的参数
      timeout: 30000
    }).then((res) => {return res.data}
    )
  },
  put(url, data, params) {
    return instance({
      headers: {'token': sessionStorage.getItem('token'),
        'Content-Type': 'application/json'
      },
      method: 'put', // 请求协议
      url: url, // 请求的地址
      data: JSON.stringify(data), // post 请求的数据
      params,
      timeout: 30000 // 超时时间, 单位毫秒
    }).then((res) => {return res.data}
    )
  },
// 删除
  del(url, params) {
    return instance({
      // headers: {//     'token': sessionStorage.getItem('token')
      // },
      method: 'delete', // 请求协议
      url: url, // 请求的地址
      params,
      timeout: 30000 // 超时时间, 单位毫秒
    }).then((res) => {return res.data}
    )
  },
// 下载
  download(url, params) {
    return axios.get(url, {
      params,
      headers: {token: sessionStorage.getItem("token")
      },
      responseType: 'blob'
    }
      // 请求头配置
    );
  },
// 自定义请求方式，该处为获取 token，不带 header 参数的 get 请求，可自行配置。getToken(url, params) {
    return instance({
      method: 'get',
      url: url,
      params, // get 请求时带的参数
      timeout: 30000
    }).then((res) => {return res.data}
    )
  },
}

 3. 在 api.js 文件中，我们可以这样写：

//api.js 文件
// 当我们切换地址时，则需要在正式、测试环境地址切换即可，打包发布也一样在此处切换接口环境。// 如下面登录接口中“/login”即为后端给的接口字段，安装此格式依次添加即可。//post，get，del 等，则为我们刚刚配置的请求方式，import $http from './http';

// 测试环境地址：let BASE_URL = 'http://xxx.test.xx';

// 正式环境地址：//let BASE_URL = "https://xxxx.xx"

// 下面接口配置举例
export default {
  BASE_URL: BASE_URL,
  // 登录
  login: (params) => $http.post(`${BASE_URL}/login`, params),
  // 获取表格接口数据
  tabledata:(params) => $http.get(`${BASE_URL}/user/all`, params),
  // 编辑用户信息
  editperson:(params) => $http.put(`${BASE_URL}/user/editperson`, params),
  // 删除用户
  delperson:(params) => $http.del(`${BASE_URL}/user/delperson`, params),
  // 添加用户
  addperson:(params) => $http.post(`${BASE_URL}/user/addperson`, params),
  // 查询职位
  getRoleList:(params) => $http.get(`${BASE_URL}/role/all`, params),
};

 3. 在 common.js 文件中，我们可以这样配置：

//common.js 文件
import axios from 'axios';
import urlApi from './api';
import httpAxios from './http';

// 现在我们目标是要全局调用接口，就在 Vue 原型上添加属性：export default {install(Vue) {
        Vue.prototype.$axios = axios;
        Vue.prototype.$urlApi = urlApi;
        Vue.prototype.$http = httpAxios;
    }
}

4. 在入口文件 main.js 中，我们可以这样配置：

（1）引入 common 文件夹（对应你的文件路径）

（2）使用 Vue.use（）即可。

5. 全局调用接口：

现在，我们在该项目的任何.vue 文件里，都可以使用“ this.$urlApi. 接口名”调用接口。

举个例子，我们在 login.vue 里面，直接调用登录接口，如下图：

这样配置好后，我们再也不用每次调接口的时候，都得 import 一下，而且每个接口都写一坨配置信息啦！