Vue功能篇 - 3.封装axios请求库

Vue封装axios请求库

import axios from 'axios';
import {
   
  Message,
  Loading
} from 'element-ui';
import router from '../router';
import _ from 'lodash';
import qs from 'qs';

const http = axios.create({
   
  baseURL: process.env.API_HOST, //设置请求的base url
  timeout: 300000, //超时时长5分钟,
  crossDomain: true
});

http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
http.defaults.paramsSerializer = (params) => {
   
  return qs.stringify(params, {
   
    arrayFormat: 'brackets'
  });
}
//loading对象
let loading;

//当前正在请求的数量
let needLoadingRequestCount = 0;

//显示loading
function showLoading(target) {
   
  // 后面这个判断很重要，因为关闭时加了抖动，此时loading对象可能还存在，
  // 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
  if (needLoadingRequestCount === 0 && !loading) {
   
    loading = Loading.service({
   
      lock: true,
      text: "拼命加载中····",
      background: 'rgba(255, 255, 255, 0.5)',
      target: target || "body"
    });
  }
  needLoadingRequestCount++;
}

//隐藏loading
function hideLoading() {
   
  needLoadingRequestCount--;
  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //做个保护
  if (needLoadingRequestCount === 0) {
   
    //关闭loading
    toHideLoading();
  }
}

//防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
var toHideLoading = _.debounce(() => {
   
  if (loading != null) {
   
    loading.close();
  }
  loading = null;
}, 300);

//添加请求拦截器
http.interceptors.request.use(config => {
   
  //判断当前请求是否设置了不显示Loading
  if (config.headers.showLoading !== false) {
   
    showLoading(config.headers.loadingTarget);
  }
  config.url = decodeURI(encodeURI(config.url).replace('%E2%80%8B',""))
  if (config.method === 'post') {
   
    config.data = qs.stringify(config.data);
  }
  // const token = store.state.token
  const token = sessionStorage.token;
  if (token&&config.method==='post') {
   
    config.headers.common["Authorization"] = token;
  }
  return config;
}, err => {
   
  //判断当前请求是否设置了不显示Loading
  if (config.headers.showLoading !== false) {
   
    hideLoading();
  }
  console.log('555555555555');
  Message.error('请求超时!');
  return Promise.resolve(err);
});

//响应拦截器
http.interceptors.response.use(
  response => {
   
    //判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
    if (response.config.headers.showLoading !== false) {
   
      hideLoading();
    }
    if (response.status === 200) {
   
      if (response.data && response.data.state === -1 && response.data.msg == '登陆过期,请重新登陆') {
   
        Message.error("登录过期，请重新登录");
        sessionStorage.removeItem('loginName');
        router.push({
   
          name: 'login'
        });
      }
      return Promise.resolve(response)
    } else {
   
      return Promise.reject(response)
    }
    return response;
  },
  error => {
   
    //判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
    // if (error.config.headers.showLoading !== false) {
   
      hideLoading();
    // }
    //拦截错误
    if (error.response && error.response.data && error.response.data.message) {
   
      var jsonObj = JSON.parse(error.response.data.message);
      Message.error(jsonObj.message);
    } else {
   
      Message.error("网络请求错误");
    }
    
    // if(error.response && error.response.data && error.response.data.message) {
   
    //   var jsonObj = JSON.parse(error.response.data.message);
    //   Message.error(jsonObj.message);
    // }else{
   
    //   Message.error(error.message);
    // }//     if (error.response.status) {
   
    //       switch (error.response.status) {
   
    //         // 401: 未登录
    //         // 未登录则跳转登录页面，并携带当前页面的路径
    //         // 在登录成功后返回当前页面，这一步需要在登录页操作。
    //         case 401:
    //           router.replace({
   
    //             path: '/login',
    //             query: { redirect: router.currentRoute.fullPath }
    //           })
    //           break
    //         // 403 token过期
    //         // 登录过期对用户进行提示
    //         // 清除本地token和清空vuex中token对象
    //         // 跳转登录页面
    //         case 403:
    //           Toast({
   
    //             message: '登录过期，请重新登录',
    //             duration: 1000,
    //             forbidClick: true
    //           })
    //           // 清除token
    //           localStorage.removeItem('token')
    //           store.commit('loginSuccess', null)
    //           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
    //           setTimeout(() => {
   
    //             router.replace({
   
    //               path: '/login',
    //               query: {
   
    //                 redirect: router.currentRoute.fullPath
    //               }
    //             })
    //           }, 1000)
    //           break
    //         // 404请求不存在
    //         case 404:
    //           Toast({
   
    //             message: '网络请求不存在',
    //             duration: 1500,
    //             forbidClick: true
    //           })
    //           break
    //         // 其他错误，直接抛出错误提示
    //         default:
    //           Toast({
   
    //             message: error.response.data.message,
    //             duration: 1500,
    //             forbidClick: true
    //           })
    //       }
    //       return Promise.reject(error.response)
    //     }
    return Promise.reject(error);
  }
);

export default http;

Api引入式调用

import request from "@/http/httpload.js"
	export default{
   
		getData(data){
   
		return request({
   
			url:"/api/xxx",
			method:"post",
			data:data
		})
	}
}