vue封装api,axios请求拦截，响应拦截

最新推荐文章于 2023-11-21 16:26:37 发布

原创最新推荐文章于 2023-11-21 16:26:37 发布 · 423 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用Axios配置全局请求及响应拦截器，并展示了账单查询与订单详情获取的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// api.js
import axios from 'axios';
import qs from 'qs';
const baseURL = 'XXX';
axios.defaults.baseURL = baseURL;

// 添加请求拦截器  
axios.interceptors.request.use(function (config) {
    // console.log(config)
    // 设置请求头
    config.headers['appId'] = 'guanwang';
    config.headers['signKey'] = 123456;
    return config
}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})
// // 获取响应头并拦截
axios.interceptors.response.use(response => {
    let result = response.headers.result
    if (result === '1') {
        ElementUI.MessageBox.confirm("该账号在另一设备登陆，是否继续？", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            ElementUI.Message({
                type: 'success',
                message: '即将跳转到登陆页面'
            });
            // 跳转登陆页面
            setTimeout(() => {
                sessionStorage.removeItem('token');
                sessionStorage.removeItem('userCode');
                router.push('/login')
            }, 2000)
        }).catch(() => {
            ElementUI.Message({
                type: 'info',
                message: '已取消'
            });
        })
    } else if (result === '4') {
        // ================================================跳转到没权限页面
        router.push({ path: 'authority' })
    }
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});
// 查询账单
export const getAccountInfo = params => {
    return axios.get(`api/cardBill?alipayUserId=${params.alipayUserId}&cardNo=${params.cardNo}&year=${params.year}&month=${params.month}`)
        .then(res => res.data);
}
// 获取订单详情
export const getOrderDetail = params => {
    return axios.post('webApi/getOrderDetail', qs.stringify(params)).then(res => res.data);
}

import axios from 'axios'
import {getOrderList, checkLogisticsInfo} from '@/api';
  async created() {
        // 假的数据，
        // const {data: {orderListInfo, result}} = await axios.get('http://localhost:8080/static/api/orderListInfo.json')
        // console.log(orderListInfo,result)
        // if(result) this.orderListInfo = orderListInfo
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const {result,message} = await getOrderList(this.userInfo);
        console.log(result,message)
        if(result && message.length > 0) {
            localStorage.setItem('orderList',JSON.stringify(message));
            this.orderListInfo = message;
        } else {
            this.$alert('没有查到订单，请详细对照手机号与车牌号', '提示', {
                confirmButtonText: '确定',
            });
        }
    }