Vue2-axios三层封装_vue2 axios封装

第一层：工具函数层

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

        在这一层封装中，可以将axios库的默认地址设置为项目中的公共地址，同时设置请求拦截器和相应拦截器，以处理一些公共的请求和相应逻辑（例：获取token、处理错误信息等）

        第一步  =>  创建文件夹：utlis/request.js

// axios的三层封装：第一层 => 对axios进行增强
import axios from "axios";
// 引入本地存储数据
import local from "@/utils/local.js";
 
// 1.设置公共服务器路径
axios.defaults.baseURL = 'http://sell.h5.itsource.cn:8087';
 
// 2.添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 发请求时，自动携带token
    let token = local.get("token");
    if(token){
        config.headers.Authorization = 'Bearer ' + token;
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 3.添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数  // 访问成功时执行
    // 判断是否获取数据成功
    if(typeof (response.data.code) === "number"){  //如果response.data.code是数字就弹提示框，如果不是就不弹
        if(response.data.code === 0){
            alert(response.data.msg);
        }else{
            alert(response.data.msg);
        }
    }
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数  // 访问失败时执行
    return Promise.reject(error);
});
 
// 暴露增强后的axios
export default axios;

        如果觉得弹出框不好看想使用Element UI的弹出框，可以引入全局的Message

// axios的三层封装：第一层 => 对axios进行增强
import axios from "axios";
//引入全局的Message(Element UI)
import { Message } from "element-ui";
// 引入本地存储数据
import local from "@/utils/local.js";
 
// 1.设置公共服务器路径
axios.defaults.baseURL = 'http://sell.h5.itsource.cn:8087';
 
// 2.添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 发请求时，自动携带token
    let token = local.get("token");
    if(token){
        config.headers.Authorization = 'Bearer ' + token;
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 3.添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数  // 访问成功时执行
    // 判断是否获取数据成功
    if(typeof (response.data.code) === "number"){  //如果response.data.code是数字就弹提示框，如果不是就不弹
        if(response.data.code === 0){
            Message.success(response.data.msg);
        }else{
            Message.error(response.data.msg);
        }
    }
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数  // 访问失败时执行
    return Promise.reject(error);
});
 
// 暴露增强后的axios
export default axios;

        第二步  =>  创建文件夹（存储数据） ：utils/ local.js

export default {
    // 获取本地存储的数据
    get(key){
        return JSON.parse( localStorage.getItem(key) );
    },
 
    // 设置本地存储中的数据
    set(key, value){
        localStorage.setItem( key, JSON.stringify(value) );
    },
 
    // 清楚本地存储
    clear(){
        localStorage.clear();
    }
}

第二层：接口函数层

        封装项目中所有请求的公共部分，项目接口有任何的改动只需要改这一层即可

        在这一层封装中，可以将项目中所有请求的公共部分抽象出来（例：请求的URL、请求参数、请求方法、请求头等）封装到一个工具文件中，以便在多个请求中使用。这一层封装可以提高代码的复用性，减少重复的代码

        创建文件夹（应用程序接口）：api/user.js（分模块进行创建.js文件）

// axios封装第二层：账号管理模块，所有用户管理模块的接口全部在这里进行封装
import request from "@/utils/request.js";  //引入增强过后的axios
 
// 登录的接口函数(post方式)
export const checkLogin = function (data) {
    return request({
        method: 'post',
        url: '相应的请求地址',
        data: data,
      });
},
 
// 获取用户列表(get方式)
export const userList = function (params) {
  return request({
    method: 'get',
    url: '相应的请求地址',
    params: params,
  });
}

第三层：应用层

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

        在这一层中，可以根据具体的业务需求对请求进行封装（例：封装获取用户列表、添加用户等接口）这一层可以很据具体的业务需求进行定制，提高代码到的可维护性和可扩展性

        在相应的页面引入使用

// axios第三层：使用封装好的接口函数
import {checkLogin} from "@/api/user.js";  //引入（普通引入需要用｛｝解构）
// 引入local
import local from "@/utils/local.js";
 
export default {
   methods: {
            submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    // 验证通过，提交数据去登陆
                    let res = await checkLogin(this.form)
                    if(res.data.code === 0){
                        local.set("token", res.data.token);  //存储token
                        local.set("role", res.data.role);  //存储role
                        this.$router.push("/index");  //成功后跳转页面
                    }
                } 
            });
        },
    }
}