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)
})

嗯嗯 然后就好了