Interfaz AXIOS paquete de vue

archivo de índice

import request from './service'


const http = {
  /** get 请求
   *  @param {接口地址} url
   *  @param {Object} params
   * */

  get(URL, params) {
    return new Promise((resolve) => {
      let res = request({ url: URL, method: 'GET', params });
      resolve(res);
    });
  },
  /** post 请求
   *  @param {接口地址} url
   *  @param {{crmCode: default.methods.workOrder.crmCode, broadbandAccount: (number|default.methods.workOrder.broadbandAccount)}} params
   * */

  post(URL, params) {
    let res = URL.includes('login')  ? request({ url: URL, method: 'POST',  params }) : request({ url: URL, method: 'POST', data: params}) ;
    console.log(URL, params,  'post');
    return new Promise((resolve) => {
      resolve(res);
    });
  },
  /** put 请求
   *  @param {接口地址} url
   *  @param {请求参数} params
   * */
  put(URL, params) {
    let res = request({ url: URL, method: 'PUT', params });
    return new Promise((resolve) => {
      resolve(res);
    })
  }
};

export default http;

intercepción de interfaz

import axios from 'axios'
import { getToken, setToken } from "../utils/auth";
import { Toast } from 'vant';
import throwErr from "./throwErr";
import { LOGIN } from "./API"
import router from '../router';

let flag = 0
const showLoading = () => {
  if ( flag === 0 ) {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner',
      duration: 0
    });
  }
  flag++
}
const hideLoading = () => {
  flag--
  if ( flag === 0 ) {
    Toast.clear()
  }
}
const service = axios.create({
  baseURL: '/jkksh',
  timeout: 60000
});

// let stime = 60 * 60 * 30;
// let t;
// function fntime(){
//   stime--;
//   t =setTimeout(fntime, 1000);
//   if (stime < 0 ) {
//     clearTimeout(t)
//     return
//   }
// }

service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json';
    if ( getToken() ) {
      // 让每个请求携带自定义token 请根据实际情况自行修改
      if ( !config.url.includes('login/sendMsgCode') || !config.url.includes('login/verifyMsgCode') ) {
        // if (stime <= 0 ) {
        //   fntime();
        // }
        config.headers['Authorization'] = 'Bearer ' + getToken()
      }
    }
    showLoading();
    return config
  },
  error => {
    // console.log(error);
    return Promise.reject(error)
  }
);

service.interceptors.response.use(
  response => {
    hideLoading()
    const code = response.status;
    if ( code < 200 || code > 300 ) {
      return Promise.reject('error')
    } else {
      if ( response.data.code === 200 ) {
        // delete response.data['msg'];
        // delete response.data['code'];
        return response.data
      } else if(response.data.code === 401 &&  response.data.msg.includes('认证失败，无法访问系统资源')) {
          console.log('***********认证失败，无法访问系统资源************');
          router.push({path: '/'})
          return Promise.reject(response.data.msg)
      } else  {
        Toast({
          message: response.data.msg,
          icon: 'cross'
        });
        return Promise.reject(response.data.msg)
      }
    }

    throwErr(response);
  },
  error => {
    let code = 0;
    Toast.clear();
    try {
      code = error.response.data.status
    } catch (e) {
      if ( error.toString().indexOf('Error: timeout') !== -1 ) {
        return Promise.reject(error)
      }
      if ( error.toString().indexOf('Error: Network Error') !== -1 ) {
        return Promise.reject(error)
      }
    }
    if ( code === 401 ) {

    } else if ( code === 403 ) {

    } else {
      console.log(error, '.......');

      const errorMsg = error.response.data.message;
      Toast({
        message: errorMsg,
        icon: 'cross'
      });

    }
    throwErr(error);
    return Promise.reject(error)
  }
);

export default service

页面调用

import API from "../httpserve/API";


    async countDown() {
      const self = this;

      if (self.flag) {
        return;
      }

      if (self.formValidate.phone === "") {
        this.$Message.error("请输入手机号");
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(self.formValidate.phone)) {
        this.$Message.error("请输入正确的手机号");
        return;
      }

      let res = await self.AXIOS.get(API.LOGIN.sendCode, {
        phone: this.formValidate.phone
      });
      console.log(res);
      if (res.code && res.code === 200) {
        self.flag = true;
        self.timeDown();
      } else {
        self.flag = false;
      }
    },