基于axios的通信层封装

基于axios的通信层封装

npm i axios

yarn add axios

请求拦截、响应拦截、错误统一处理

api目录下创建http.js文件并加入以下内容

定义全局错误提示信息

import {
      Message } from 'element-ui'; // 引入element错误提示功能
/** 
 * 提示函数 
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {
         
    Message.error({
             
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

页面重定向

import router from '../router';
/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
     
    router.replace({
     
        path: '/login',        
        query: {
     
            redirect: router.currentRoute.fullPath
        }
    });
}

/**
 * 跳转超时提示页面
 * 接口连接超时
 */ 
const timeOut = () => {
     
    router.replace({
     
        path: '/404'
    });
}

请求拦截、响应拦截

请求拦截

import axios from 'axios';
import store from '../store/index';

/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
     
    
    // 状态码判断
    switch (status) {
     
        // 400: 未登录状态，跳转登录页
        case 400:
            // console.log()
            tip('请求的参数错误！');
            break;
        // 401: 未登录状态，跳转登录页
        case 401:
            toLogin();
            break;
        
        // 403 token过期
        // 清除token并跳转登录页
        case 405:
            tip('405:请求的方式不允许'); 
            break;
        case 403:
            // tip('403:登录过期，请重新登录');
            window.localStorage.removeItem('token');
            store.commit('userStatus', false);
            setTimeout(() => {
     
                toLogin();
            }, 100);
            break;
        // 404请求不存在
        case 404:
            tip('404:请求的资源不存在'); 
            break;
        // 500 : 
        case 500:
            tip('500:后台接口错误！'); 
            break;
        case 507:
            tip('507:服务器内部错误！'); 
            break;
        default:
            console.log(other);   
    }
}
// 创建axios实例
var instance = axios.create({
         timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(    
    config => {
             
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。      
        // version.getVersion()  
        const token ='JWT '+ store.state.token;        
        // const versions =version.getVersion();        
        token && (config.headers.Authorization = token);   
        // versions && (config.headers.version = version.getVersion());  
        // config.headers.version = version.getVersion()
        return config;    
    },    
    error => Promise.error(error))

响应拦截

// 响应拦截器
instance.interceptors.response.use(    
    // 请求成功
    
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 请求失败
    error => {
     
        const {
      response } = error;
        if (response) {
     
            // 请求已发出，但是不在2xx的范围 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
     
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            console.log("超时")
            tip('请求超时！'); 
            store.commit('changeNetwork', false);
            // timeOut();
        }
    });

export default instance;

api接口的统一输出

api目录下创建index.js文件并加入以下内容

// 基于nodejs文件操作方法循环遍历apiList目录下的js文件，最终以modules对象方式输出
const path = require('path')
const files = require.context('./apiList',false,/\.js$/)
const modules = {
     }
files.keys().forEach(key=>{
     
    const name = path.basename(key,'.js')
    modules[name] = files(key).default || files(key)
})
// 其他模块的接口……
 
// 导出接口
export default modules

定义base文件

api目录下创建base.js文件并加入以下内容

const base = {
         
    sq: 'https://api.xxxx.com',
    bd: 'https://api.xxxx.cn', 
}
 
export default base;

接口List

api目录下创建apiList文件夹，并创建login.js（登录接口）

import base from '../base'; // 导入接口域名列表
import axiosAkn from '@/api/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块

const login = {
     
    // 登录请求
    login(params) {
     
        return axiosAkn.post(`${
       base.bd}/login/`, qs.stringify(params));
    }
}

export default login;

---

@Author：楼招颜