VUE 封装好的axios

import axios, {AxiosRequestConfig, AxiosResponse, AxiosResponseHeaders, CancelToken, CancelTokenSource} from "axios";
//(axios as any).defaults.headers.common['token'] = localStorage.getItem("token");
const http = axios.create({
    baseURL: 'http://localhost:8080/',
});

http.interceptors.request.use((conflg: AxiosRequestConfig) => {
    conflg.headers['token'] = localStorage.getItem("token")//拦截所有异步请求,将所有请求带上token
    return conflg;
});

// 响应拦截
http.interceptors.response.use(


    (config: AxiosResponse<any>) => {
        config.headers['token'] = localStorage.getItem("token")
        return config;
    },
    (err) => {
        if (err && err.response) {
            switch (err.response.status) {
                case 400:
                    console.log("客户端请求的语法错误,服务器无法理解");
                    break;
                case 401:
                    console.log("身份验证出错");
                    break;
                case 403:
                    console.log("服务器理解请求客户端的请求,但是拒绝执行此请求");
                    break;
                case 404:
                    console.log(`请求地址出错:${err.response.config.url}`);
                    break;
                case 405:
                    console.log("请求方式被禁止");
                    break;
                case 408:
                    console.log("请求超时");
                    break;
                case 500:
                    console.log("服务器内部错误,无法完成请求");
                    break;
                case 501:
                    console.log("	服务器不支持请求的功能,无法完成请求");
                    break;
                case 502:
                    console.log(
                        "作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应"
                    );
                    break;
                case 503:
                    console.log(
                        "由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中"
                    );
                    break;
                case 504:
                    console.log("充当网关或代理的服务器,未及时从远端服务器获取请求");
                    break;
                case 505:
                    console.log("服务器不支持请求的HTTP协议的版本");
                    break;
                default:
                    console.log(`请求出错:${err.message}`);
            }
        }else{
            console.log("服务器连接失败")
        }
        return err;
    }
);

export default http;

VUE文件中如何使用

      (this as any).$axios.get('http://localhost:8080/goods/found/'+this.$data.word ,{}) //(this as any)用于屏蔽类型错误报错
          .then(response => {
            this.$data.list=response.data;

          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

  

posted @ 2022-01-12 17:19  麦克斯-侯  阅读(75)  评论(0编辑  收藏  举报
百纵科技