second package request axios

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
  })
}


/**
 * 封装post请求
 @Param URL * 
 * @param the params 
 * Promise @Returns {} 
 * / 

//   Form1 the Data
 //   headers: {
 //     "the Content-the Type": 'file application / X-WWW-form-urlencoded; charset = UTF-. 8'
 //   } 

// Form the Data request payload 
// when a request headers to send json request but if your background is formData way interface to pass on a header come qs can formData need to serialize 
// because we are back json accepted more so json json turn can modify this need is garbled string otherwise according to their own situation with me is the default
 
Export function POST (url, params = {}, headers) {
   return  new new Promise ((Resolve, Reject) => {
     IF (headers == undefined) { 
      axios.post (url, JSON.stringify ( params), {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err.data)
        })
    } else {
      axios.post(url, QS.stringify(params), headers)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err.data)
        })
    }

  });
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

 

 

main.js in 

import {
  post,
  get,
  patch,
  put,
} from './assets/utils/http'


//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;

 use

this.$get("/role/getAllRole",{}).then(res => {});

this.$post("/judge/editJudgeInfoRole", {
        oid: this.rowData.oid,
        roleid: this.roleid
      }).then(res => {});

Interception

All codes

import axios from 'axios'
import QS from "qs"
import store from "@/store/index"
import router from '@/router/index'
import { mapState, mapMutations } from "vuex";
import {
  Message
} from 'element-ui';
axios.defaults.timeout = 10000;
axios.defaults.baseURL = process.env.API_ROOT;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.headers.common['Authorization'] = store.state.token ? store.state.token : localStorage.token;

axios.interceptors.request.use(
  config => {
    config.headers = {
      'Authorization': store.state.token ? store.state.token : localStorage.token
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.code != 0){
      Message.error({
        message:response.data.msg,
      })
      if (response.data.code == 40001) {
        setTimeout(() => {
          localStorage.token = '';
          this.setToken('');
          router.replace({
            path: '/login'
          })
        }, 1500);
      }
    }
    return response;

  },
  error => {
    return Promise.reject(error)
  }
)