vue脚手架配置访问接口地址信息

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

当我们连接后台访问接口地址的时候，通常都是很长的一串（像 123456.qicp.vip/my/news ），但是前面的一部分都是每个接口前面都有的（ 123456.qicp.vip/ ），这时候我们就可以把它单独拎出来，以后每次访问只要写后面那一截就可以了（ /my/news ）

我们需要在main.js （你的项目的入口文件，是从上到下的执行的）中配置一段代码，设置axios的默认接口域名，在此之前我们需要安装axios

npm install axios
npm install --save axios vue-axios

import axios from "axios";
axios.defaults.baseURL = "http://2z55s62479.qicp.vip/";   
Vue.prototype.$http = axios;

然后设置过滤器，因为有的链接需要带token才访问，逻辑是当通过axios访问接口的时候，给它配置token。token是很长的一段字母，写在代码中会显得很冗长。token是后台给的，可以看作访问一些私密信息链接的钥匙，通常是在login登录代码中进行接收保存。我这里是存在了localStorage里面，我们也可以选择存在其他地方。

给headers中Authorization（可能叫其他的名）赋值,也就是把我们的token带上去访问，Promise.reject()方法返回一个带有拒绝原因的Promise对象。

axios.interceptors.request.use(config => {
  config.headers.Authorization = window.localStorage.getItem('token');
  return config;
},error => {
  return Promise.reject(error);
});

localStorage的存取很简单

var storage = window.localStorage;
storage.setItem('token', "Bearer eyJhbGciOiJIUzUxMiJ9.eyJ0b2tlbi..." );
console.log(storage.getItem("token"));

前端向后端传值的时候，有时候需要传数组 qs.stringify()将对象序列化成URL的形式，也是需要安装qs npm install axios qs主要是增加一些安全性的查询字符串解析和序列化字符串的库。 这里拦截了delete和get两个方法进行处理

import qs from 'qs'
axios.interceptors.request.use(request => {
  if (request.method === 'delete' || request.method === 'get') {
    request.paramsSerializer = function(params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  }
  return request
},(error) =>{
  return Promise.reject(error);
})

然后我们就可以在方法中访问接口了

async getData(){
    var id = 1;
    const { data: res } = await this.$http.get("/my/carsInformation/" + id);
    console.log(res);
}

因为 main.js 是项目的入口文件嘛，我们还可以将全局的样式表放在 main.js 里面，只需要引入就可以了

// 导入全局样式表
import "./assets/css/global.css";