uniapp中uni.request(OBJECT)接口请求封装实例代码

 更新时间:2022年12月09日 14:11:09   作者:sunly_  
在开发的时候经常会用到前端请求后端接口,每次的请求都会出现地址不一样,参数不一样,方式不一样等等情况,下面这篇文章主要给大家介绍了关于uniapp中uni.request(OBJECT)接口请求封装的相关资料,需要的朋友可以参考下

封装request.js

import { baseURL} from './common.js' //接口域名引入

// 拦截
let requestStart = function(params) {
	// 如果需要在接口参数中加入token,使用下边这段代码
	let access_token = uni.getStorageSync('access_token') || '';
	if (params.__proto__.constructor.name == "Object") {
		access_token && (params.access_token = access_token);
		params = params;
	} else if (params.__proto__.constructor.name == "FormData") {
		access_token && (params.append("access_token", access_token));
	}

	// 如果需要显示加载动画
	// 	uni.showNavigationBarLoading(); // 在当前页面显示导航条加载动画。
	// 	uni.showLoading({
	// 		title: '加载中',
	// 		mask: true
	// 	});
	return params;
}

// 对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
// 对于 POST 方法且 header['content-type'] 为 application/json 的数据,会进行 JSON 序列化。
// 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

export function get(url, params = {}) {
	return new Promise((resolve, reject) => {
		if (requestStart(params)) {
			uni.request({
				url: baseURL + url,
				data: params,
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				method: 'GET',
				success: (res) => {
					if (res.statusCode != 200)) {
						uni.showToast({
							title: res.statusCode +':'+ res.data.message,
							mask: true,
							icon: "none"
						});
						if(res.statusCode == 401){
							setTimeout(() => {
								uni.removeStorageSync('access_token');
								uni.removeStorageSync('userinfo');
								uni.navigateTo({
									url: '/pages/login/login',
									animationType: 'pop-in',
									animationDuration: 300
								})
							}, 1500)
						}
					}else{
						resolve(res.data);
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.message,
								mask: true,
								icon: "none"
							});
						}
					}
				},
				fail: (res) => {
					reject(res)
				},
			});
		}
	});
}

export function post(url, params = {}) {
	return new Promise((resolve, reject) => {
		// 如果需要在header头中加入token,使用这段代码 header: header,
		// if(uni.getStorageSync('access_token')){
		// 	header.token = uni.getStorageSync('access_token')
		// }
		if (requestStart(params)) {
			uni.request({
				url: baseURL + url,
				data: params,
				header: {
					'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
				},
				method: 'POST',
				success: (res) => {
					if (res.statusCode != 200)) {
						uni.showToast({
							title: res.statusCode +':'+ res.data.message,
							mask: true,
							icon: "none"
						});
						if(res.statusCode == 401){
							setTimeout(() => {
								uni.removeStorageSync('access_token');
								uni.removeStorageSync('userinfo');
								uni.navigateTo({
									url: '/pages/login/login',
									animationType: 'pop-in',
									animationDuration: 300
								})
							}, 1500)
						}
					}else{
						resolve(res.data);
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.message,
								mask: true,
								icon: "none"
							});
						}
					}
				},
				fail: (res) => {
					reject(res)
				},
			});
		}

	});
}

var http = {
	post,
	get
};
export default http;

main.js引入

import http from '@/utils/request.js'; //接口请求封装
Object.assign(Vue.prototype, {
	'$http': http,
})

在页面中使用

onShow(){
	this.$http.post("/api/",{
		// id:1
	}).then(res=>{
		if(res.code == 200){
			// 成功
		}else{
			// 失败需要进行的操作
		}
	})
},

总结

到此这篇关于uniapp中uni.request(OBJECT)接口请求封装的文章就介绍到这了,更多相关uniapp uni.request(OBJECT)接口请求封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序如何修改radio和checkbox的默认样式和图标

    微信小程序如何修改radio和checkbox的默认样式和图标

    这篇文章主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript迭代器的含义及用法

    JavaScript迭代器的含义及用法

    这篇文章主要介绍了JavaScript迭代器的含义及用法,迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作。,需要的朋友可以参考下
    2019-06-06
  • JS实现网页上随机产生超链接地址的方法

    JS实现网页上随机产生超链接地址的方法

    这篇文章主要介绍了JS实现网页上随机产生超链接地址的方法,涉及JavaScript随机数的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 基于ts的动态接口数据配置的详解

    基于ts的动态接口数据配置的详解

    这篇文章主要介绍了基于ts的动态接口数据配置的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 微信小程序封装的HTTP请求示例【附升级版】

    微信小程序封装的HTTP请求示例【附升级版】

    这篇文章主要介绍了微信小程序封装的HTTP请求,结合实例形式分析了微信小程序封装基于wx.request方法的http请求相关操作与使用技巧,并附带升级版示例供大家参考,需要的朋友可以参考下
    2019-05-05
  • JavaScript知识点总结之如何提高性能

    JavaScript知识点总结之如何提高性能

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货,需要的朋友快来一起学习吧
    2016-01-01
  • JS块级作用域和私有变量实例分析

    JS块级作用域和私有变量实例分析

    这篇文章主要介绍了JS块级作用域和私有变量,结合实例形式较为详细的分析了javascript块级作用域和私有变量相关概念、原理、操作技巧,需要的朋友可以参考下
    2019-05-05
  • 前端TypeScript时间格式化函数举例详解

    前端TypeScript时间格式化函数举例详解

    这篇文章主要介绍了前端TypeScript时间格式化函数的相关资料,包括日期格式化formatDate、获取周数getWeek、相对时间格式化formatPast、时间问候语formatAxis以及日期时间格式化parseTime和parseDate,每个方法都有详细的参数说明和示例,需要的朋友可以参考下
    2025-02-02
  • Bootstrap基本样式学习笔记之按钮(4)

    Bootstrap基本样式学习笔记之按钮(4)

    篇文章主要介绍了Bootstrap学习笔记之按钮基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • p5.js临摹动态图形的方法

    p5.js临摹动态图形的方法

    这篇文章主要为大家详细介绍了p5.js临摹动态图形的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论