[JavaScript知识库]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)
    })
}