uni-app 封装调用接口

47 篇文章 0 订阅
42 篇文章 0 订阅

在封装调用接口方法的时候最好是在项目内重新创建一个目录存放你的统一调用方法的目录 我是取名为【common】
在这里插入图片描述

request.js

// 请求接口
const commoneUrl = "http://xxxxxxxxxx";
//get请求封装
function getRequest(url,data){
	var promise = new Promise((resolve,reject) => {
			var postData = data;
			uni.request({
				url:commoneUrl + url,
				data:postData,
				method:"GET",
				dataType:'json',
				header:{
					'content-type': 'application/json'
				},
				success:function(res){
					if(res.statusCode === 200)
					{
						resolve(res.data);
					}else{
						resolve(res.data)
					}
				},
				error:function(e)
				{
					reject('网络出错');
				}
			});
	});
	return promise;
}
(其实这里你不用var 可以直接return 只是我在写的时候为了方便自己看的习惯)
//post请求封装
function postRequest(url,data){
	var promise = new Promise((resolve,reject) => {
		var postData = data;
		uni.request({
			url:commoneUrl + url,
			data:postData,
			method:'POST',
			header:{
				'content-type': 'application/x-www-form-urlencoded'
			},
			success:function(res)
			{
				if(res.statusCode === 200 && res.data.resultCode == 0)
				{
					resolve(res.data);
				}else{
					resolve(res.data)
				}
			},
			error:function(e)
			{
				reject('网络出错');
			}
		})
	});
	return promise;
}

如果开发项目中在登录的时候需要进行token验证,可以在header那里加入一段代码
在这里插入图片描述

header:
	{
		'content-type':'application/json',
		'Authorization':'Bearer '+ postHeader
		},

postHeader就是后台传给你的token把它值存在这里

anyway,最后把你写的这些方法导出

module.exports = {
	postRequest,
	postHeaderRequest,
	getRequest
}

http.js

//引用request.js
var request = require('./request.js')

//调用方法 👇 我把url放在单独的js 这样方面后续管理
var getToken = function(e){
	return request.getRequest('http://xxxxxxx',e);
}

e参数就是你要传的data数据
最后,导出方法

module.exports = {
	apiRequest
}

差点忘记写如何在页面调用 =0=

import http from '../../common/http.js'
//获取token
	http.getToken('').then(res=>{
		this.token = res.accessToken;
		//储存token
		uni.setStorageSync('token',this.token);
	})

如果有帮到你记得给我点个赞哦~

结束。

uni-app封装接口的方法可以参考以下步骤: 1. 在utils文件夹下创建一个request.js文件,该文件用于定义接口请求相关的函数和配置。 2. 在request.js文件中,先定义一个baseURL变量,用于存储接口的基地址。 3. 创建一个request函数,该函数接收一个options对象作为参数。在函数内部,使用uni.request方法发送请求。 4. 在request函数内部,需要配置请求的url、方法、参数、请求头等信息,并返回一个Promise对象以进行异步操作。 5. 在uni.request的success回调函数中,判断接口返回的状态码,如果为200则表示请求成功,通过resolve方法将数据返回。 6. 如果状态码不为200,则根据具体情况进行处理,比如判断是否需要跳转到登录页或清除缓存等,并通过reject方法返回相应的错误信息。 7. 在uni.request的fail回调函数中,输出错误信息,并通过reject方法返回错误。 8. 在需要调用接口的页面中,可以在生命周期钩子函数中调用接口请求函数。如果需要传递参数,可以在调用函数时传入参数。 9. 在api文件夹下创建一个index.js文件,用于存放具体的接口请求函数。 10. 在index.js文件中,引入request函数,并定义具体的接口请求函数。在函数中调用request函数,并传入接口的url、方法和参数等信息。 11. 在需要获取数据的页面中,可以通过导入对应的接口请求函数来获取数据。 请注意,以上是一种常见的封装接口的方法,具体实现可以根据项目的需求进行调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp接口封装](https://blog.csdn.net/weixin_52276970/article/details/126397791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp封装接口](https://blog.csdn.net/zhuxiaolong1234/article/details/127816166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值