Axios

官方文档：https://axios-http.com/zh/
Axios中文网：http://www.axios-js.com/zh-cn/docs/

牛逼教程：https://www.bilibili.com/video/BV1rz4y1Z7n3

封装axios

// 这份文件就是用来做拦截的
import axios from 'axios'
// 创建一个单例（实例）
const instance = axios.create({
    baseURL: 'http://kumanxuan1.f3322.net:8001',
    timeout: 4000
})
// 拦截器 - 请求拦截
instance.interceptors.request.use(config=>{
    // 部分接口需要拿到token
    let token = localStorage.getItem('token');
    if(token){
        config.headers = {
            'aa-token': token
        }
    }
    return config;
}, err=>{
    return Promise.reject(err)
});
// 拦截器 - 响应拦截
instance.interceptors.response.use(res=>{
    return res;
}, err=>{
    return Promise.reject(err)
});
// 整体导出
export default instance;

写API

// 将request.js整体导入
import request from './request'
// 按需导出每个请求，也就是按需导出每个api
// 请求首页数据
export const GetHomeAPI = (params) => request.get('/index/index', {params});
// 登录
export const PostLoginAPI = (params) => request.post('/auth/loginByWeb', params);

<template>
  <div id="app">
    <button @click="getFn">发起一个get请求</button>
    <button @click="postFn">发起一个post请求</button>
  </div>
</template>
<script>
// 按需导入
import { GetHomeAPI, PostLoginAPI } from '@/request/api.js'
export default {
  name: 'Home',
  methods: {
    getFn() {
      // 发起一个get请求
      GetHomeAPI().then(function (res) {
        console.log(res)
      });
    },
    postFn() {
      // 发起一个post请求
      PostLoginAPI({
        username: '你单排吧',
        pwd: '123456'
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>