Axios 配置 and 接口管理

Posted 2021-09-14 啊政1234

为了方便对 axios 操作，我们通常对 axios 进行二次封装

首先在src目录下创建utils/request.js，然后在requset.js中配置  

• service.interceptors.request.use 里面设置请求头（token）
• service.interceptors.response.use 里面是对返回的数据进行操作

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, // 是否携带cookies
  timeout: 5000, //请求超时
});
//请求拦截
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");
    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;

接口管理

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

• url ：接口地址
• method ：请求方法
• data ：请求参数

        

import service from "./index";
//定义请求方法，然后导出
export function Code(arg) {
  return service({
    url: "/smsCode",
    data: arg,
    method: "post",
  });
}

调用的话，在页面中先引入，然后操作（在事件里面也一样）

import { Code } from "@/service/api.js"

async created() {
   const res = await Code();
  }