Vue axios 使用记录

axios.defaults.timeout = 5000;                        //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL = 'http://192.168.0.191:8089/erp/';   //配置接口地址
// axios.defaults.baseURL = 'http://192.168.0.158:5000/erp';   //配置接口地址

let requestLoading = function(){
  if($('.loading').length === 0){
    $(document.body).append(`<div class="loading"> <span class="loading-text"></span></div>`);
  }
};

//添加请求拦截器
axios.interceptors.request.use((config) => {
  // console.log(config)
  if(config.url!=='/updatetoken'){
    //请求loading界面。
    requestLoading();
  }
  //在发送请求之前做某件事
  if(config.url !== '/login'){
    config.headers['Authorization'] = `${localStorage.getItem('token_type')} ${localStorage.getItem('access_token')}`
  }
  if(config.method === 'post'){
    config.headers['Accept'] = 'application/json';
    config.headers['Content-Type'] = 'application/json';
  }
  // console.log(config)
  return config;
},(error) =>{
  $('.loading').remove();
  //console.log('错误的传参')
  // console.log(error.response)
  // console.log(error.message)
  // console.log(error.config)
  // return Promise.reject(error);
  let err = '';
  if (error.response) {
    err = error.response;
  } else {
    err = {response:{data:{detail:'网络异常！'}}};
  }

  return Promise.reject(err);
});

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
  $('.loading').remove();
  //对响应数据做些事
  if(!res.data.success){
    return Promise.resolve(res);
  }
  return res;
}, (error) => {
  $('.loading').remove();
  // console.log(error.response)
  // console.log(error.message)
  // console.log(error.config)
  if (error.response) {
    return Promise.reject(error);
  } else {
    let err = {response:{data:{detail:'网络异常！'}}};
    return Promise.reject(err);
  }
});

//返回一个Promise(发送post请求)
Vue.prototype.$fetchPost = function(url, params,type) {
  return new Promise((resolve, reject) => {
    let postPrams = {method: "post", url, data: params,};
    if(type === 'object'){
      postPrams['params'] = params;
    }
    axios(postPrams)
      .then(response => {
        resolve(response);
      })
      .catch((error) => {
        reject(error)
      })
  })
};
//返回一个Promise(发送put请求)
Vue.prototype.$fetchPut = function(url, params) {
  return new Promise((resolve, reject) => {
    axios({method: "put", url, data: params,})
      .then(response => {
        resolve(response);
      })
      .catch((error) => {
        reject(error)
      })
  })
};
////返回一个Promise(发送get请求)
Vue.prototype.$fetchGet = function(url, params) {
  return new Promise((resolve, reject) => {
    axios({method: "get", url, params: params,})
      .then(response => {
        resolve(response)
      })
      .catch((error) => {
        reject(error)
      })
  })
};

//返回一个Promise(发送delete请求)
Vue.prototype.$fetchDelete = function(url, params) {
  return new Promise((resolve, reject) => {
    axios({method: "delete", url, params: params,})
      .then(response => {
        resolve(response)
      })
      .catch((error) => {
        reject(error)
      })
  })
};

//返回一个Promise(发送axios请求)
Vue.prototype.$fetchAxios = function(method,url,params,type) {
  return new Promise((resolve, reject) => {
    let postPrams = {method: method, url, data: params,};
    if(type === 'object'){
      postPrams['params'] = params;
      delete postPrams['data']
    }else{
      postPrams['data'] = params;
      delete postPrams['params']
    }
    axios(postPrams)
      .then(response => {
        resolve(response)
      })
      .catch((error) => {
        reject(error)
      })
  })
};