Promise對axios再封裝

創建一個Ajax.js
引入以下文件

import axios from 'axios';
import Vue from 'vue'; //這裏我要做個請求loading 所以引入
import 'element-ui/lib/theme-chalk/index.css'; //這裏我要做個請求loading 所以引入
import {axios_defaults_timeout} from '@frameworks/conf/config' // 設置請求最長時間 (我給的20s)
import qs from 'qs' //請求字符串序列化

axios.defaults.timeout = axios_defaults_timeout; //超出時間
axios.defaults.baseURL = JSON.parse(process.env.VUE_APP_MICRO_SERVICE)?process.env.VUE_APP_URL:process.env.VUE_APP_SINGLEURL; //填寫域名 生產環境和測試環境的url

然後就是請求的時候自帶loading 用的是elementUI默認的 根據情況使用:

let loading
let needLoadingRequestCount = 0  //請求數量
function startLoading () {
  loading = Vue.prototype.$loading({
    lock: true,
    text: '努力加載中...',
    background: 'rgba(0,0,0,0.5)',
    spinner:'el-icon-loading',
    target: document.querySelector('.loading-area') // 設置加載動畫區域
  })
}
function endLoading () {
  loading.close()
}
function showFullScreenLoading () {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}
function hideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

定義完了這些 然後就是 設置攔截請求頭信息

//http request 攔截器
axios.interceptors.request.use(
  config => {
    if (config.isLoading !== false) { // 如果配置了isLoading: false，則不顯示loading
      showFullScreenLoading()
    }
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin':'*',
      // 'Authorization':cookies.get('access_token')?'Bearer '+cookies.get('access_token'):''
    }
    return config;
  },
  error => {
    hideFullScreenLoading()
    return Promise.reject(err);
  }
);

然後就是對異常處理

//響應攔截器即異常處理
axios.interceptors.response.use(response => {
    hideFullScreenLoading() // 響應成功關閉loading
    return response
}, err => {
   hideFullScreenLoading() // 響應成功關閉loading
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
          return Promise.resolve({status:err.response.status,message:'錯誤請求'});
          break;
        case 401:
          return Promise.resolve({status:err.response.status,message:'未授權，請重新登錄'});
          break;
        case 403:
          return Promise.resolve({status:err.response.status,message:'拒絕訪問'});
          break;
        case 404:
          return Promise.resolve({status:err.response.status,message:'請求錯誤,未找到該資源'});
          break;
        case 405:
          return Promise.resolve({status:err.response.status,message:'請求方法未允許'});
          break;
        case 408:
          return Promise.resolve({status:err.response.status,message:'請求超時'});
          break;
        case 500:
          return Promise.resolve({status:err.response.status,message:'服務器端出錯'});
          break;
        case 501:
          return Promise.resolve({status:err.response.status,message:'網絡未實現'});
          break;
        case 502:
          return Promise.resolve({status:err.response.status,message:'網絡錯誤'});
          break;
        case 503:
          return Promise.resolve({status:err.response.status,message:'服務不可用'});
          break;
        case 504:
          return Promise.resolve({status:err.response.status,message:'網絡超時'});
          break;
        case 505:
          return Promise.resolve({status:err.response.status,message:'http版本不支持該請求'});
          break;
        default:
          return Promise.resolve({status:err.response.status,message:'未知錯誤'});
          break;
      }
    } else {
      if(err){
        return Promise.resolve({status:err,message:'連接到服務器失敗'});
      }else{
        return Promise.resolve({status:'',message:'Error未定義'});
      }
     
    }
    return Promise.resolve(err.response)
})

接下來就開始封裝常用的方法
get：這裏用到了fetch

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      if(response.data) resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

post：

/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,qs.stringify(data))
      .then(response => {
        if(response.data) resolve(response.data);
      },err => {
        reject(err)
      })
   })
 }

後面這兩個沒怎麼用過~哈哈

 /**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           if(response.data) 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 => {
           if(response.data) resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

然後返回

const ajax = {
  fetch,post,patch,put
}

export default ajax

然後在main.js定義以下全局的ajax就可以使用啦~

//先在main.js 引入
import ajax from '@frameworks/assets/js/Ajax' //路徑寫自己的

//定義全局
window.ajax = Vue.prototype.$ajax = ajax

最後在你的組件中使用
這裏的參數我寫死{username:this.username,password:this.password}

this.$ajax.post(url,{username:this.username,password:this.password}).then((res)=>{
	console.log(res)
})

嗯嗯 然後就好了