一、定义utils（工具类）目录，并创建两个文件，request.js与http.js

request.js

用于创建axios，并在请求/响应拦截时对需要传递的数据进行处理。

// 引入 axios
import axios from 'axios' // 使用前要先安装依赖：npm install axios

//引入 element-ui 信息
import {Message} from "element-ui";
import router from "@/router";

// 创建axios实例
const service = axios.create({ 
	// 这里可以放一下公用属性等。
	baseUrl: 'https://xxxx', // 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
	withCredentials： false, // 跨域请求时是否需要访问凭证
	timeout: 3 * 1000, // 请求超时时间
	headers: { // 请求头
		...
	}
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 这里可以进行请求加密等操作。如添加token,cookie，修改数据传输格式等。
    // 设置请求头
    config.headers.Accept = "application/json";
    config.headers["Content-Type"] = "application/json";
    // 获取 token 并设置 Authorization 头部
    let token =
      window.localStorage.getItem("token") ||
      window.sessionStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = "Bearer " + token;
    }
    // 添加自定义头部
    // config.headers["custom-Sumu"] = "xxxx";
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    // 对响应数据做处理
    return response;
  },
  (error) => {
    // 请求失败进行的操作
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 401:
          Message({
            type: "warning",
            message: "尚未登录，请登录！",
            offset: 54,
          });
          router.push("/login");
          break;
      }
    } else {
      return Promise.reject(error);
    }
  }
);

export default service;

http.js

import request from './request';

const http = {
	get(url, params, headers) {
		const config = {
			method: 'GET',
			url: url
			params: params ? params : {},
			headers: headers ? headers : {}
		}
		return request(config);	
	},
	post(url, data, headers) {
		const config = {
			method: 'POST',
			url: url
			data: data ? data : {},
			headers: headers ? headers : {}
		}
		return request(config);	
	}
}

二、定义存放接口目录(api)，假设首页需请求接口，添加home.js

home.js

import http from '@/utils/http';

export function homeData(parmas){
	return http.get('/api/list', params, headers数据)
}

三、home.vue文件中使用。

import { homeData } from '@/api/home.js'
export default {
	methods: {
		fn() {
			const params = {
				...	
			}
			homeData(params).then(res => {
				console.log(res);	
			}).catch(err => {
				console.log(err);	
			})
		}
	}
}