uniapp 微信小程序 全局请求封装、请求/响应拦截器

写个底层基础请求文件 request.js

// 全局请求封装
export default (url, method, params) => {
const baseUrl = 'http://172.168.2.33:6066/api'
const token = uni.getStorageSync('user_token')
	uni.showLoading({ title: '加载中' })
	if(!token ){
		// 执行没有登录的逻辑
     
		return
	}
	return new Promise((resolve, reject) => {
		wx.request({
			url: baseUrl + url,
			method: method,
			header: { 'Authorization': 'Bearer ' + token }, // 设置token，请根据实际情况判断是否要设置
			data: { ...params },
			success(res) {
                console.log('响应拦截器succeess接口返回:', res)
                if (res.data.code === 401) {
                	// 如果后端返回401无权限，则本地同步删除缓存(token等信息)
                    uni.clearStorageSync()
                    resolve(res.data)
                } else {
                    resolve(res.data)
                }
			},
			fail(err) {
				reject(err)
			},
			complete() {
				uni.hideLoading()
			}
		})
	})
}

在api.js文件中封装页面中使用的接口

import request from '@/config/request.js'
export default {
	// 密码登录
	passWordLogin(params) {
		return request('/student/metadata/test', 'GET', params)
	},
	// 上传坐标
	sendPosition(data) {
		return request('/student/user/uploadLocation', 'POST', data)
	},
	// 获取配置信息
	getConfig(data) {
		return request('/student/user/configInfo', 'GET', data)
	},
	// 退出微信小程序
	logout() {
		return request('/student/user/logout', 'GET')
	},
    // 确定文章
    confirmArticle(id) {
    	return request('/student/user/articleOrder/confirmed?id='+id, 'PUT')
    },
    // 备注文章
    remarkArticle(data) {
    	return request('/student/user/articleOrder/remark', 'PUT', data)
    },
}

在页面中使用api.js封装的请求方法

<script>
    import api from '@/api/api.js'

                api.passWordLogin({ 'name': 'xiaoming' }).then(res => {
                    console.log('测试接口返回:', res)
                }).catch(err=>{
                    console.log(err)
                })

最后

以上就是端庄哈密瓜为你收集整理的uniapp 微信小程序 全局请求封装、请求/响应拦截器的全部内容，希望文章能够帮你解决uniapp 微信小程序 全局请求封装、请求/响应拦截器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。