ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue axios封装 fetch.js

2020-10-26 15:35:26  阅读:131  来源: 互联网

标签:case axios return response break vue error message fetch


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;

  

标签:case,axios,return,response,break,vue,error,message,fetch
来源: https://www.cnblogs.com/qjh0208/p/13878705.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有