axios二次封装

在src目录下创建一个utils文件，里面有三个JS文件，分别时config.js（url、请求方式），core.js（请求拦截，响应拦截，请求超时），index.js（接口文件）

首先在core.js里面引入axios和vant组件的Toast弹框

设置超出时间，以及baseURL

请求拦截、响应拦截

//请求拦截
//请求发送之前
// var loading = null;
axiosInstance.interceptors.request.use((config)=>{
    //拦截成功触发
    // loading = Loading.services()   
     // if(localStorage.getItem("adminToken")){
     //   config.headers.Authorization = "Bearer " + localStorage.getItem("adminToken")
     // }
    Toast.setDefaultOptions({ duration: 0 });
    Toast.setDefaultOptions('loading', { forbidClick: true });
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay:true,
        duration:0
      });
 
      //console.log(config.headers);
     console.log(config);
    return config;
},(error)=>{
    //请求还没发触发
    //没有网络会触发
    return Promise.reject(error)
})


//响应拦截
axiosInstance.interceptors.response.use((response)=>{
    //对响应数据做些什么
    setTimeout(()=>{
        Toast.clear()
    },1000)
    return response;
},(error)=>{
    //对响应错误做些什么
    //服务器宕机或者没有网络服务器不搭理你 超时 触发
    return Promise.reject(error)
})

请求方式

export function request(methods,url,params){
    switch(methods){
        case "GET":
           return GET(url,params);
        case "POST":
           return POST(url,params);
        case "PUT":
            return PUT(url,params);
    }
}

function GET(url,params){
  return  axiosInstance.get(url,params)
}

function POST(url,params){
   return axiosInstance.post(url,params)
}


function PUT(url,params){
    return axiosInstance.put(url,params)
 }

然后在config.js里设置URL

export const URL = {
    appIndex: "/api/app/recommend/appIndex",
}

export const METHOD = {
//给未定义的魔法值定义一下
    GET: "GET",
    POST: "POST",
    PUT:"PUT"
}

再在接口文件index.js里面引入core.js和config.js

import {request} from "./core"
import {URL,METHOD} from "./config"

export default {
	install(Vue){
		Vue.prototype.$APIClient = this;
	}
	appIndex(){
		return request(METHOD.GET,URL.appIndex)
	}
}

在src目录下的mian.js里写入

import APIClient from "./utils/index";
Vue.use(APIClient)

使用的话就是

 this.$APIClient.appIndex().then(res=>{
			console.log(res)
        }).catch(error=>{
            console.log(error);
        })