axios的核心:三层封装

在实际项目中axios都是要经过封装再使用的，企业级的项目一般都是三层封装

local.js

export default {
	// 获取本地存储中的数据
	get(key) {
		return JSON.parse(localStorage.getItem(key)); //转成对象丢出去
	},

	//设置本地存储中的数据
	set(key, value) {
		localStorage.setItem(key, JSON.stringify(value));
	},

	// 清除本地存储
	clear() {
		localStorage.clear();
	},
};

1. 工具层

对axios工具进行增强，如：设置公共的请求服务器、设置请求拦截器、设置响应拦截器...

创建文件：utils/request.js

// axios的三层封装,第一层工具函数层,对axios进行增强
import axios from "axios";
import { Message } from "element-ui"; //引入全局的Message
import local from "@/utils/local.js";

// 设置公共服务器路径
axios.defaults.baseURL = "http://sell.h5.itsource.cn:8087";

// 添加请求拦截器
axios.interceptors.request.use(
	function (config) {
		// 发请求时,自动携带token
		let token = local.get("token");
		config.headers.Authorization = "Bearer " + token;
		// console.log(config);
		// 在发送请求之前做些什么
		return config;
	},
	function (error) {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 添加响应拦截器
axios.interceptors.response.use(
	function (res) {
		// 访问成功时执行
		// console.log("//", res);

		// 判断是否获取数据成功
		if (typeof res.data.code === "number") {
			if (res.data.code === 0 || res.data.code === 200) {
				Message.success(res.data.msg);
			} else {
				Message.error(res.data.msg);
			}
		}

		return res;
	},
	function (err) {
		// 访问失败时执行
		return Promise.reject(err);
	}
);

// 暴露增强后的axios
export default axios;

2. 接口函数层

对axios工具进行增强，如：设置公共的请求服务器、设置请求拦截器、设置响应拦截器...

创建文件：utils/request.js

import request from '@/utils/request.js'  //引入增强过后的axios

//登陆的接口函数
export const checkLogin=function(data){
    return request({
        method: 'post',
        url: '/users/checkLogin',
        data,
    });
}

3. 应用层

在实际项目页面中使用接口函数，非常便捷

import {checkLogin} from '@/api/user.js'; //普通引入，需要解构

//验证通过，提交数据去登陆
let res = await checkLogin(this.form)
console.log(res);