Axios三层封装

Axios三层封装

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

1. 工具函数层

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

1. 创建一个文件夹utils，用来放axios。
2. 创建文件，随便取名，这里我取request.js
3. 引入

import axios from "axios";

4. 设置公共服务器路径

axios.defaults.baseURL = 'https://api.example.com';

5. 暴露改造过后的axios

export default axios

2. 接口函数层

对项目所有的接口进行封装，项目接口有任何的改动只需要改这样一层就可以了。

1. 创建一个文件夹，比如api。里面分模块创建不同api接口，方便管理。

• 不同模块就要使用不同的api，所以要根据需要决定封装多少个模块
• 比如登录是一个模块，就用login.js，获取用户信息是一个，用userInfor.js

// 引入增强后的axios。名字可以取别的，不一定要是axios。
import axios from '@/utils/request.js'

// 登陆模块的接口函数，这里要将axios执行后的promise对象return出去
export const checkLogin = (data) => {
    // 因为要返回promise对象，所以一定有写return！！
    return axios({
        method: 'post',
        url: '/users/checkLogin',
        data, // 要传的参数就用型参。
    });
}

3. 应用层

在实际项目页面中使用接口函数。

1. 引入
   因为上面是普通暴露，所以必须要解构出来

// 引入发送数据请求的api
import { checkLogin } from "@/api/user.js";

2. 使用checkLogin要传入参数。

// 点击登录
    jump() {
      // 进行表单验证，因为是异步，所以async修饰。
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 等待验证结果
          let res = await checkLogin(this.form);
          console.log(res); //输出结果。
        } else {
          return false;
        }
      });
    }