Vue-cli 2 / 3 / 4 中封装Axios拦截请求进行数据交互

Axios

1. 安装Axios依赖

$ npm install axios

2. 设置接口地址 urls.js

• 这里看个人需要, 把地址放在自己需要的位置, 例如vue-cli2以及3.3前在 dev.env.js / prod.env.js 中设置, 在vue-cli3.3后以及4中在 .env.developent / .env.production 中设置 ( vue-cli4中对全局变量有命名要求,  此处不做赘述, 详情参考vue-cli4官方文档 ) , 如果需要配置一个可修改的文件控制访问请求地址, 可以将其配置在可在打包后访问的静态资源文件中

3. 封装Axios方法 index.js

import axios from 'axios'
// 项目使用了element组件, 此处根据自己使用的框架可以引用其他提示功能组件
import { Message } from 'element-ui'
import router from '../router/index'
import store from '../store'

// 创建Axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_URL, // 封装配置的api 的 base_url
    timeout: 600000 // 请求超时
})

// 请求拦截
service.interceptors.request.use(
    config => {
        // 设置默认Content-Type
        if (!config.headers['Content-Type']) {
            config.headers = {
                'Content-Type': 'application/json;charset=utf-8',
            }
        }

        // 写入token参数, 根据自己项目参数修改
        const accessToken = sessionStorage.getItem("token");
        if (accessToken) {
            config.headers.Authorization = accessToken;
        }
        return config
    },
    error => {
        // 处理请求错误
        Promise.reject(error)
    }
)

// 响应拦截
service.interceptors.response.use(
    response => {
        if (response.data.code != '200') {
            // 接口请求失败, 状态码或者其他拦截方式根据项目自定
            Message({
                message: response.data.message,
                type: 'error',
                showClose: true
            });
        } else {
            // 请求成功, 直接返回data部分, 减少页面接参层级
            return response.data;
        }
    },
    error => {
        // 接口请求报错拦截, 这里是我个人项目的设置, 服务端返回状态码401时拦截请求重定向到登录
        if (error.response.status == 401) {
            // token失效
            if(store.state.tip) {
                sessionStorage.removeItem('token');
                Message({
                    message: error.response.data.message,
                    type: 'error',
                    showClose: true
                });
                // 使用一个vuex变量控制使401报错每个页面仅弹出一次, 登陆页需重置此状态
                store.state.tip = false
                router.push({
                    path: '/'
                })
            }
        } else {
            // 其它报错显示服务器报错信息
            Message({
                message: error.response.data.message,
                type: 'error',
                showClose: true
            });
        }
        return Promise.reject(error)
    }
)

export default service

4. 封装请求地址, 在页面调用时调用请求地址封装即可, 这么处理是方便接口查找以及修改,  摘分公共接口

// 这里是vue-cli4.2.3的路径  其他版本路径可以能不一致
import request from '../utils/request'

// 登录
function login(data) {
    return request({
        url: '/login',
        method: 'post',
        data: data
    });
}

// 退出登录
function logout(data) {
    return request({
        url: '/logout',
        method: 'post',
        data: data
    });
}

export default {
    login: login,
    logout: logout
}

5. 在组件中调用接口地址封装

<script>
import loginApi from "@/api/loginApi"; // 封装的接口地址, 根据需求自己分层引入
export default {
    name: 'login',
    data() {
        return {}
    },
    mounted() {},
    methods: {
        login() {
            let data = {} // 接口传入参数,
            loginApi.login(data).then(res => {
                // 接口被拦截时会获得res为undefined, 所以这里需要判断一下
                if(res) {
                    // 返回参数处理
                    sessionStorage.setItem('token', res.content.token)
                    this.$router.push({
                        path: '/index'
                    })
                }
            })
        },
    },
}
</script>