精易论坛

标题: Uniapp封装请求拦截 [打印本页]

作者: 陆先森    时间: 2021-11-3 10:42
标题: Uniapp封装请求拦截

最近一个项目是用uniapp做的,但是uniapp的uni.request({})并没有请求拦截,于是我尝试封装了一下,封装的背景是项目的很多请求是需要携带token的 新建一个utils文件夹,里面有request.js文件,下面是request.js文件


const baseURL='https://story.genielink.cn'
const http=(options)=>{
    const token=uni.getStorageSync('token')
    //如果token不存在就跳转到个人页面,让用户登录
    if(!token){
        uni.navigateTo({
            url:'../people/people_main'
        })
        return ;
    }else{
        return new Promise((resolve,reject)=>{
            uni.request({
                url:baseURL+options.url,
                //请求url中如果没有method,默认是get
                method:options.methods||'GET',
                //请求url中如果没有data,默认为空
                data: options.data || {},
                header: {Authorization:token},
                success:res=>{
                    if(!res){
                        return uni.showToast({icon:'loading',title:'获取数据失败'})
                    }
                    console.log(res.data)
                    resolve(res)
                },
                fail:err=>{
                    return uni.showToast({
                        icon:'loading',
                        title:'请求失败'
                    })
                    reject(err)
                }
            })
        })
    }
}

然后在main.js中挂载到全局,

import http from 'pages/utils/request.js'

Vue.prototype.$http=http

然后就可以用this.$http({url: ,method: })请求了







欢迎光临 精易论坛 (https://125.confly.eu.org/) Powered by Discuz! X3.4