【uni-app】uni-app 封装 uni.request 携带请求头

uni-app 中使用 uni.request 发起网络请求,由于业务的需要,一些请求需要携带请求头访问,于是我对该请求方法进行了封装。

新建 common/app.js

export const apiBaseUrl = 'http://192.168.1.104:8091/sports-tms/'

// 不需要登录的接口
const noToken = [
	'sys/wxlogin'
];

const request = (method, methodType, data, callback, hideLoading) => {
	// 请求头信息
	var headers = {
		'content-type': 'application/x-www-form-urlencoded'
	};
	
	// 判断是否需要登录
	if (!(noToken.indexOf(method) >= 0)) {
		// 获取用户 token
		let userToken = uni.getStorageSync('x-access-token')
		if (!userToken) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		} else {
			// 将 token 放入请求头中
			headers['x-access-token'] = userToken
		}
	}
	
	// 如果调用接口不明确不显示 loading
	if (!hideLoading) {
		uni.showLoading({
			title: '加载中'
		});
	}
	uni.request({
		url: apiBaseUrl + method,
		data: data,
		header: headers,
		method: methodType,
		success: (response) => {
			if (!hideLoading) {
				uni.hideLoading();
			}
			console.log(response.data)
			const result = response.data
			if (result.code == 500) {
				uni.showToast({
					icon: 'none',
					title: result.message,
					duration: 1500
				})
			} else {
				console.log(result)
				callback(result)
			}
		},
		complete: () => {
			uni.hideLoading();
		},
		fail: (error) => {
			uni.hideLoading();
			if (error && error.response) {
				showError(error.response);
			}
		}
	})
}

const showError = error => {
	let errorMsg = ''
	switch (error.status) {
		case 400:
			errorMsg = '请求参数错误'
			break
		case 401:
			errorMsg = '未授权,请登录'
			break
		case 403:
			errorMsg = '跨域拒绝访问'
			break
		case 404:
			errorMsg = `请求地址出错: ${error.config.url}`
			break
		case 408:
			errorMsg = '请求超时'
			break
		case 500:
			errorMsg = '服务器内部错误'
			break
		case 501:
			errorMsg = '服务未实现'
			break
		case 502:
			errorMsg = '网关错误'
			break
		case 503:
			errorMsg = '服务不可用'
			break
		case 504:
			errorMsg = '网关超时'
			break
		case 505:
			errorMsg = 'HTTP版本不受支持'
			break
		default:
			errorMsg = error.msg
			break
	}

	uni.showToast({
		title: errorMsg,
		icon: 'none',
		duration: 1000,
		complete: function() {
			setTimeout(function() {
				uni.hideToast();
			}, 1000);
		}
	});
}

// 微信登录
export const wxlogin = (data, callback, hideLoading) => request('sys/wxlogin', 'POST', data, callback, hideLoading);

修改 main.js

主要增加 import * as request from './common/api'Vue.prototype.$api = {request}

import Vue from 'vue'
import App from './App'
import store from './store'
import uView from "uview-ui";
import * as request from './common/api'

Vue.use(uView);

Vue.config.productionTip = false

Vue.prototype.$store = store

Vue.prototype.$api = {request};


App.mpType = 'app'

const app = new Vue({
	store,
	...App
})
app.$mount()

common/api.js 中定义接口

export const wxlogin = (data, callback, hideLoading) => request('sys/wxlogin', 'POST', data, callback, hideLoading);

三个参数

  • data:该接口需要传递的参数
  • callback:请求完成的回调函数
  • uniHideLoading:是否显示加载中…,默认为 true

使用接口

this.$api.request.wxlogin({
	code: that.code,
	encryptedData: encryptedData,
	iv: iv
}, res => {
	console.log(res)
	uni.setStorageSync("x-access-token", res.result.token)
	uni.setStorageSync("userId", res.result.userInfo.id)
	// 进入首页
	uni.switchTab({
		url: '/pages/educational/educational'
	})
});
  • 3
    点赞
  • 26
    收藏
  • 打赏
    打赏
  • 2
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

衡木

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值