uni-app 使用escook/request-miniprogram插件发请求

最新推荐文章于 2024-05-14 14:47:11 发布

原创最新推荐文章于 2024-05-14 14:47:11 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

本文介绍了一个小程序中统一处理HTTP请求的方法，使用了@escook/request-miniprogram插件，并展示了如何配置请求和响应拦截器，以及如何在页面中发起POST请求实现登录功能。

一 , 安装

npm install @escook/request-miniprogram

用这个插件发请求的优点就是可以直接在main.js中设置请求拦截器和响应拦截器 , 还有根路径 , 比较方便

二 , main.js中

// 导入发请求的包,并挂载到uni身上
import {
	$http
} from '@escook/request-miniprogram'

uni.$http = $http

// 请求根路径 
$http.baseUrl = '/api' 

//请求拦截器
$http.beforeRequest = function(config) {
	
}

//响应拦截器
$http.afterRequest = function(response) {
	console.log(response)

	if (response.data.code == '0001') {
		uni.showToast({
			title: '您还没有登录喔',
			duration: 2000,
			icon: "none"
		});

		setTimeout(function() {
			uni.navigateTo({
				url: '../login/login'
			});
		}, 1000)


	} else {
		return
	}
}

二 , 需要发请求的.vue页面中
uni.$http.post(‘请求路径’, 参数);

methods: {
	// 登录
	async formSubmit(e) {
              //参数
		const params = {
			username: e.detail.value.username,
			password: e.detail.value.password,	
		};
              // 开启loading
		uni.showLoading({
			title:"登录中"
		})
             //发送请求
		const {data: res} = await uni.$http.post('/login', params);
		
		if (res.code !== '0') {
			return uni.showToast({
				title: '用户名或密码错误',
				duration: 2000,
				icon: 'none'
			});
			return;
		} else {
			uni.showToast({
				title: '登录成功',
				duration: 2000,
				icon: 'none'
			});    
		}
	}
}