安装axios

npm install axios

封装api接口

  • 新建文件夹——utils
  • utils中新建文件——api.js

api.js

  • 导入axios
import axios from 'axios'
  • 因为需要用到element中的message弹窗,所以需要引入element-ui
import { Message } from 'element-ui'

写出响应的拦截器

import axios from 'axios'
import {
    Message
} from 'element-ui';
// 因为未登录需要跳转到登录页面,所以导入路由
import router from '../router'


// 响应拦截器
// success只是成功连接上端口,并非成功执行(还没有进行操作)
axios.interceptors.response.use(success => {
    // 业务逻辑错误
    // 判断是否连接到端口,status是正常调用到端口的响应码,调用到接口的时候返回200
    if (success.status && success.status == 200) {
        // 判断业务逻辑是否错误
        /**
         * data是后端返回的json对象,
         * json对象中有三个属性,
         *      code:响应码,
         *          code==500:业务逻辑错误
         *          code==401:未登录
         *          code==403:权限禁止
         *      message:响应信息,
         *      object:传递携带对象
         */
        if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
            // 把后端给的提示错误信息显示出来
            Message.error({
                message: success.data.message
            });
            return;
        }
        // 判断有没有提示信息
        if (success.data.message) {
            // 有提示信息则显示提示信息
            Message.success({
                message: success.data.message
            });
        }
    }
    // 返回显示数据
    return success.data;
}, error => {
    //没有访问到接口
    /**
     * code==404:页面找不到了
     * 详细请看5.HTTP响应码大全
     */
    if (error.response.code == 504 || error.response.code == 404) {
        Message.error({
            message: '服务器被吃了o(╯□╰)o'
        });
    } else if (error.response.code == 403) {
        Message.error({
            message: '权限不足,请联系管理员!'
        })
    } else if (error.response.code == 401) {
        Message.error({
            message: '尚未登录,请登录~'
        });
        // 直接路由替换成登录页('/')
        router.replace('/');
    } else {
        // 如果不是以上状况,那么判断response错误响应中是否有提示信息
        if (error.response.data.message) {
            // 有错误提示信息返回显示
            Message.error({
                message: error.response.data.message
            });
        } else {
            // 如果没有提示信息,那么返回未知信息
            Message.error({
                message: '未知错误!'
            });
        }
    }
    return;
});