vue请求拦截器和响应器

main.js中

// 引入请求封装
require('./util/request/index')(app)

index.js中

module.exports = (vm) => {
    require('./requestInterceptors')(vm)
    require('./responseInterceptors')(vm)
}

requestInterceptors.js中

/**
 * 请求拦截
 * @param {Object} http
 */
module.exports = (vm) => {
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        // 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
        config.data = config.data || {}
        // 可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中
        // console.log(vm.$store.state);
        return config
    }, (config) => // 可使用async await 做异步操作
        Promise.reject(config))
}

responseInterceptors.js中

/**
 * 响应拦截
 * @param {Object} http 
 */
module.exports = (vm) => {
    uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
        const data = response
        // 自定义参数
        const custom = response.config?.custom
        if (data.data.code != 200) { // 服务端返回的状态码不等于200,则reject()
            // 如果没有显式定义custom的toast参数为false的话,默认对报错进行toast弹出提示
			if(data.data.id == 'tron' || data.config.url == '/slider/'){
				return data || {}
			}
			if(data.data.code == 1005){
				uni.$u.toast(data.data.message)
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				},1500)
			}else {
                uni.$u.toast(data.data.message || '服务器错误')
            }
            // 如果需要catch返回,则进行reject
            if (custom?.catch) {
                return Promise.reject(data)
            } else {
                // 否则返回一个pending中的promise
                return new Promise(() => { })
            }
        }
        return data || {}
    }, (response) => { /*  对响应错误做点什么 (statusCode !== 200)*/
        return Promise.reject(response)
    })
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值