• vue axios封装 fetch.js


    import router from "@/router";
    import store from "@/store";
    import axios from "axios";
    import {
      Message,
      Loading
    } from "element-ui";
    let service = axios.create({
      timeout: 60 * 1000 * 10
    });
    let loadingInstance;
    //请求拦截器
    service.interceptors.request.use(
      config => {
        loadingInstance = Loading.service({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        config.cancelToken = store.state.axiosSource.token;
        console.log(config)
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    //响应拦截器
    service.interceptors.response.use(
      response => {
        loadingInstance.close();
        if (response.data.code == 800) {
          store.commit("setUser", null);
          store.state.axiosSource.cancel();
          if (router.currentRoute.name != "login") {
            router.push({
              name: "login",
              params: {
                reLogin: true
              }
            });
          }
        } else if (response.data.code == 200 || !response.data.code) {
            return Promise.resolve(response);
        } else {
          Message({
            message: response.data.msg,
            type: "warning"
          });
          return Promise.reject(response);
        }
      },
      error => {
        loadingInstance.close();
        if (axios.isCancel(error)) {
          return new Promise(() => {});
        }
        if (error.response) {
          switch (error.response.status) {
            case 400:
              error.message = "请求错误";
              break;
            case 401:
              error.message = "未授权,请登录";
              break;
            case 403:
              error.message = "拒绝访问";
              break;
            case 404:
              error.message = `请求地址出错: ${error.response.config.url}`;
              break;
            case 408:
              error.message = "请求超时";
              break;
            case 500:
              error.message = "服务器内部错误";
              break;
            case 501:
              error.message = "服务未实现";
              break;
            case 502:
              error.message = "网关错误";
              break;
            case 503:
              error.message = "服务不可用";
              break;
            case 504:
              error.message = "服务未启动";
              break;
            case 505:
              error.message = "HTTP版本不受支持";
              break;
            case 602:
              error.message = "当前时间不允许上报";
            break;
            default:
              error.message = "服务超时";
          }
        } else {
          error.message = "请检查网络是否通畅";
        }
        Message.error(error.message);
        return Promise.reject(error);
      }
    );
    export default service;
    

      

  • 相关阅读:
    新书《JFinal极速开发实战》正式发布
    Maven转化为Dynamic Web Module
    SpringMVC——数据校验
    SpringMVC——请求映射
    Spring——Bean的命名及实例化
    js实现省市区三级联动
    MySQL数据库忘记密码
    Spring——控制反转
    SpringMVC(五)@RequestHeader和@CookieValue
    SpringMVC(四)@RequestParam
  • 原文地址:https://www.cnblogs.com/qjh0208/p/13878705.html
Copyright © 2020-2023  润新知