15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

网络请求封装

李家霖| 发布于 2021-10-13 21:58:44| 583阅读| 0点赞| 0评论
举报

将网络请求全部的封装到一个文件中 使代码更加的简洁 便于管理

				uni.request({
					method: "POST",
					url: "http://huiyi.qinfenniao.com/api/Login/updateInfo",
					data,
					header:{token:uni.getStorageSync('token')},
					success(res) {
						console.log(res)
					}
				});

上边的代码是一个最简单的请求  没有经过任何的封装  直接写在了页面中   需要手动的去配置请求方式、请求路径、请求参数、请求头、成功的回调函数;  这样直接的在代码中去写并不易于管理  还会写很多重复的代码    


 在有大量的请求调用时比较好的处理方式是封装到一个js文件中;

     


uni文件中新建一个js文件







在该js文件中写入网络请求的代码     这里的网络请求代码中的数据都不应该写死    应该是根据传递的值来进行相应的网络请求       这个js文件将会作为一个公共的函数来传递出去

const location = "http://shuzizhaopin.qinfenniao.com"
export default {
	Request(token,data,api,res){
		uni.request({
			header:{token:Token},
			url:location + api,
			data:data,
			method:"POST",
			success:(data)=>{
				
				res(data);
			}
		})
	}

上边就是在js文件中写入的代码

第一行声明了一个公共的请求地址  在传递请求地址的时候只传递地址最后面不同的部分就可以了

第二行  export default  表示如果在别的vue文件中通过import 来引入该文件时将会返回 export default代码后的对象

从第三行开始就是公共网络请求的主体   网络请求的代码包含在Request这个函数中   在使用的时候应该是调用Request这个函数  然后通过不同的传参来进行不同的请求调用




引入js代码   



  在uni文件的main.js这个文件中   通过import 来引入公共网络请求的js文件   然后将引入的文件 通过Vue.prototype.$api = api    添加到vue的原型当中   这样在每一个界面中都可以访问到这个公共方法





在页面中使用

				this.$api.Request(uni.getStorageSync("token"),{post_id:this.wordId,qiye_id:this.qiyeId},"/api/user/invite",res=>{
					console.log(res)
				})

调用公共方法后第一个传递的值应该是token    是添加在请求头上  如果不需要传token  直接写一个空字符串即可

第二个传递的值是data里面的值  请求所携带的参数

第三个是请求的路径部分   在文件中定义了公共路径   只需要传最后不同的部分

最后一个值是回调函数  执行完 Request()函数中的请求后将会回调该函数 并将请求返回值作为参数传递进来;

公共请求中唯一写死的地方是请求的方法是POST请求  也可以多加一个值来设置请求方法    或者再写一份专门用来GET请求的公共函数



0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部