a最简单·详细的axios 封装和接口管理

为什么要对Axios进行封装呢？

1.  为了请求更方便
2. 为了后续的修改等操作的时候，更简便
3. 为了让main.js更轻量级，
4. 高聚合，低耦合

axios的封装很简单，只有一步操作

 在src目录下创建http/services.js，然后在services.js中配置  

import axios from "axios";
import { base_Url } from "@/config";
import { Toast } from "vant";
// console.log(base_Url,'dad');
//基础配置、创建axios实例
let service = axios.create({
  baseURL: base_Url, //基地址
  // withCredentials: true, 
  timeout: 5000, //请求超时
//还有好多不常用变量可以去axios官网查看，这里只列举几条最常用的
});
//请求拦截
let loading;
service.interceptors.request.use(
  (config) => {
    //1、loading动画开启
    loading = Toast.loading({
      duration: 5000,
      message: "加载中...",
      forbidClick: true,
    });
    // console.log(config);
    //2、token设置 (把token添加到请求头中) vuex(http是无状态的)
    // config.headers["Authorization"] = sessionStorage.getItem("token");//token存在哪里写哪里
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);
//响应拦截
service.interceptors.response.use(
  (res) => {
    //1、关闭loading
    loading.clear();
    console.log(res);
    return Promise.resolve(res);
  },
  (error) => {
    loading.clear();
    console.log("err" + error);
    return Promise.reject(error);
  }
);
export default service

这样我们就对axios封装完成了！！

二丶接口管理（为了后续更改接口后更方便修改）：

在上面utils目录下创建一个api.js用于管理接口：

1. url ：接口地址
2. method ：请求方法
3. data ：请求参数

import  service  from  "./services";
//定义请求方法，然后导出
export  function  Code(arg)  {  
    return  service({     url:  getUrl.sms,     data:  arg,     method:   "post",    });
}
//url葱创建的getUrl路径中获取（下文）

注意，需要一个接口就封装一个接口

url从何而来？

1，http下创建一个文件getUrl，里面配置url（就拿sms举例，）

export default {
    sms: "/smsCode"
}

这样在请求的时候就可以用设置的axios请求名代替this.$axios.get()等方法了

例如：

 async login() {
      var res = await Code({
        mobile: this.mobile,
        type: 2,
        client: 1,
        sms_code: this.phone_number,
      });
      console.log(res);
      if (res.data.code == 200) {
        this.$router.push("/shouye");
      }
    },