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

// 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: '确定',
            });
        }
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 项目中,可以通过以下步骤封装 axios请求拦截响应拦截: 1. 安装 axios ``` npm install axios --save ``` 2. 创建一个 axios 实例 在项目中,一般会有多个接口请求,为了方便管理和配置,可以创建一个 axios 实例来处理所有的请求。在 `src` 目录下新建一个 `api` 文件夹,然后在该文件夹下新建一个 `http.js` 文件,输入以下代码: ```JavaScript import axios from 'axios' const http = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) export default http ``` 上述代码中,我们创建了一个名为 `http` 的 axios 实例,并设置了一些默认配置,如请求的基础 URL、请求超时时间、请求头等。 3. 设置请求拦截请求拦截器可以在请求发送前做一些处理,如添加请求头、添加 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.request.use(config => { // 添加 loading // ... // 添加请求头 // ... return config }, error => { return Promise.reject(error) }) ``` 4. 设置响应拦截响应拦截器可以在接收到响应后做一些处理,如判断响应状态码、关闭 loading 等。在 `http.js` 文件中添加以下代码: ```JavaScript http.interceptors.response.use(response => { // 判断响应状态码 if (response.status === 200) { return Promise.resolve(response.data) } else { return Promise.reject(new Error(response.statusText)) } // 关闭 loading // ... }, error => { return Promise.reject(error) }) ``` 5. 通过 `http` 实例发送请求 在需要发送请求的组件中,可以通过 `http` 实例发送请求。例如,获取用户列表的代码如下所示: ```JavaScript import http from '@/api/http' export default { data() { return { userList: [] } }, mounted() { http.get('/user/list').then(res => { this.userList = res.data }) } } ``` 上述代码中,我们通过 `http` 实例发送了一个 GET 请求请求的 URL 为 `/user/list`。请求成功后,将响应数据赋值给 `userList`。 通过以上步骤,我们就成功地封装axios请求拦截响应拦截。在实际开发中,我们还可以根据项目需求进行更加复杂的封装
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值