axios封装请求get和post接口的方法

import axios from 'axios';
import _ from 'lodash';
import Vue from 'vue';
import {
      Toast } from 'vant';

Vue.use(Toast);

export default {
     
  get(url, params,config) {
     
    return new Promise((resolve, reject) => {
     
      let urlNew = url;
      if(params) {
     
        if ( _.isObject(params)) {
     
          _.forIn(params, (key, value) => {
     
            urlNew += `?${
       value}=${
       key}&`;
          });
          urlNew = _.trimEnd(urlNew, '&');
        } else {
     
          throw new Error('入参格式错误')
        }
      }
      if (config && config.loading) {
     
        Toast.loading({
      message: '加载中...', forbidClick: true, duration: 0 });
      }
      axios.get(urlNew).then(res => {
     
        Toast.clear();
        if (res.data.success) {
     
          resolve(res.data.data)
        }else {
     
          Toast(res.data.errorMsg);
          reject();
        }
      }).catch(err => {
     
        if(err && err.response && err.response.status === 401){
     
          localStorage.setItem('loginBackUrl', window.location.href);
          location.replace('/pages/common/login?loginBackUrl=1');
        }
        if (err && err.response && err.response.request && err.response.request.responseText) {
     
          const emp = err.response.request.responseText.includes('');
          if (emp) {
     
            localStorage.setItem('loginBackUrl', window.location.href);
            location.replace('/pages/common/login?loginBackUrl=1');
          }
        }
        Toast.clear();
        Toast('服务异常');
        reject();
      })
    });
  },
  post(url, params,config) {
     
    return new Promise((resolve, reject) => {
     
      if (!_.isObject(params)){
     
        throw new Error('入参格式错误')
      }
      if (config && config.loading) {
     
        Toast.loading({
      message: '加载中...', forbidClick: true, duration: 0 });
      }
      axios.post(url,params).then(res => {
     
        Toast.clear();
        if (res.data.success) {
     
          resolve(res.data.data)
        }else {
     
          Toast(res.data.errorMsg);
          reject();
        }
      }).catch(err => {
     
        console.error(err);
        if(err && err.response && err.response.status === 401){
     
          localStorage.setItem('loginBackUrl', window.location.href);
          location.replace('/pages/common/login?loginBackUrl=1');
          reject();
        }
        if (err && err.response && err.response.request && err.response.request.responseText) {
     
          const emp = err.response.request.responseText.includes('');
          if (emp) {
     
            localStorage.setItem('loginBackUrl', window.location.href);
            location.replace('/pages/common/login?loginBackUrl=1');
          }
          reject();
        }
        Toast.clear();
        Toast('服务异常');
        reject();
      })
    });
  }
}

使用例子

import Vue from 'vue';
import {
      Toast, Dialog,RadioGroup, Radio,Cell, CellGroup } from 'vant';
import '@/filters';
import {
      Url } from '@/request';
import reqMethod from "../../components/reqMethod"

Vue.use(Dialog).use(Toast).use(RadioGroup).use(Radio).use(Cell).use(CellGroup);
export default{
     
  data() {
     
    return {
     
      defaultAccountItem:{
     }, // 默认账户
    }
  },
  methods: {
     
    /**
     * 初始化方法
     */
    init(){
     
      // 获取默认账户
      reqMethod.get(Url.listDefaultAccount,{
     code:666},{
     loading:true}).then(res =>{
     
        this.defaultAccountItem = res[0] || {
     };
      });
    }
  },
  created() {
     
    this.init();
  }
}

你可能感兴趣的:(js,前端)