vue项目封装axios以及全局的api接口

我们在搭建vue项目时，当我们写好静态样式，要向后端的接口发送请求获取数据的时候，我们可以封装axios，然后用axios封装全局可以直接调用的接口名称，利用这些名称调用接口，可以让代码更为的简洁，也可以让我们后期在接口的更改上更加的容易，不用在每个页面之中来回的寻找。

一，在项目中调用npm命令下载axios

npm i axios -S

在main.js中引用

import axios from "axios";

二，在src目录下的utils文件夹中创建request.js文件，封装axios

如果上传数据类型为普通的json格式

/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message} from 'element-ui';
//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: 'https:localhose:8080',
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
   config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
   config.headers = {
     'Content-Type':'application/json' //配置请求头
   }
   //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
   //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
   let token = localStorage.getItem("token")
   if (token) {
     config.headers.Authorization = 'Bearer ' + localStorage.getItem("token")
   }