axios http配置

最新推荐文章于 2024-08-04 21:45:12 发布

榴莲不好吃

最新推荐文章于 2024-08-04 21:45:12 发布

阅读量1.1w

点赞数 2

分类专栏： vue 文章标签：拦截器 loading

本文链接：https://blog.csdn.net/sllailcp/article/details/80937912

版权

vue 专栏收录该内容

33 篇文章 14 订阅

订阅专栏

axios全局配置axios.js文件

/**
 * http配置
 */

import axios from 'axios'
// 超时时间
axios.defaults.timeout = 60000;
export default axios;

post方法封装axios.service.js

import { Vue } from 'vue-property-decorator';
import axios from './axios';
import { Canceler } from 'axios';
import $router from '@/router';

function decoratorclass(target: any) {
  //   console.log(target);
}

type Method = 'get' | 'GET' | 'delete' | 'DELETE' |
'head' | 'HEAD' | 'options' | 'OPTIONS' | 'post' |
'POST' | 'put' | 'PUT' | 'patch' | 'PATCH' | 'link' |
'LINK' | 'unlink' | 'UNLINK' | undefined;
export type RequestParams = { url: string; data?: any; type?: Method; notLoading?: boolean, cancel?: Function }
const BASE_URL = process.env.VUE_APP_BASE_URL; // 全局接口地址

export const Cancel: any[] = []; // 在router中,如果有路由变化,可以全部取消请求

@decoratorclass
export default class Service extends Vue {
  request(opt: RequestParams) {
    let params = {};
    if (opt.data) {
      params = opt.data;
    }
    let loading: any = null;
    if (!opt.notLoading) {
      loading = this.$layer.loading();  // 自定义方法
    }
    const types: Method = opt.type || 'post';
    return new Promise<any>((reslove, reject) => {
      axios({
        method: types,
        url: `${BASE_URL}${opt.url}`,
        [types==='get'?'params':'data']: params,
        cancelToken: new axios.CancelToken((c: Canceler) => {
          // 单个请求取消,用于方法调用的时候可以随时取消本次请求
          if(opt.cancel){
            opt.cancel(c); // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
          }
          
          // 全局的取消事件,取消所有请求;用于路由跳转,取消所有请求;
          Cancel.push({
            url: opt.url,
            cancel: c
          });
        }),
      }).then((res) => {
        if (res.status === 200) {
          if(res.data.ResultCode === 0){
            /**
             * 401：帐号信息错误或已过期，跳转至授权页面
             * 41003：帐号信息错误或已过期，跳转至授权页面
             * 500： 系统异常，如果影响主流程跳转至错误页面
             */
            if(res.data.MsgCode === '401' || res.data.MsgCode === '41003' || res.data.MsgCode === '500'){
              $router.push({name:'Error',query:{msg: res.data.Msg}});
              return;
            } else if(res.data.MsgCode === 'WARN'){ // 警告信息，弹框提示 Data有值 正常Data 页面正常
              reslove(res.data);
            } else { // 接口校验报错，以及别的普通报错，弹出来就行
              this.$layer.toast(res.data.Msg);

              reject(res);
            }
          } else { // ResultCode ！= 0 的时候都算 正常情况
            reslove(res.data);
          }
        } else { // axios报错
          reject(res);
        }
      }).catch((error) => {
        console.log(error.message);
      }).finally(() => {
        for(let f = 0;f< Cancel.length;f++) {
          if(Cancel[f].url === opt.url){
            Cancel.splice(f,1);
            break;
          };
        }
        this.$layer.hide(loading); // 自定义方法
      });
    });
  }
}

export const service = new Service();

/** 举例
 * @url接口地址
 * @data参数
 * @type请求方式 选填 默认post
 * @cancel是否取消当前请求
 * @notLoading不使用默认的loading弹出层
service.request({
    url: `/Hotel/HotelDetailRoomPlanRate`,
    data:{"TripType":"0"},
    type: 'post',
    cancel: (c: Canceler) => {
      setTimeout(() => { // 条件
        c('取消HotelDetailRoomPlanRate的请求');
      },200)
    }
}).then((res) => {}).catch((res) => {});
*/

取消所有请求:

router.beforeEach((to, from, next) => {
// 如果有路由跳转的话,取消所有请求;
  if (Cancel.length) {
    Cancel.forEach(e => {
      console.log(e.url);
      e && e.cancel('cancel-all');
    })
  } 
  next()
})