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一下，而且每个接口都写一坨配置信息啦！