uniapp微信小程序封装网络请求 @escook/request-miniprogram

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序封装网络请求 @escook/request-miniprogram。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用 @escook/request-miniprogram 封装网络请求

官网地址:https://www.npmjs.com/package/@escook/request-miniprogram

快速入门

1、下载依赖

npm install @escook/request-miniprogram

2、引入

把下面代码放到 main.js

// @escook/request-miniprogram 网络请求
import { $http } from '@escook/request-miniprogram'
// 在 uni-app 项目中,可以把 $http 挂载到 uni 顶级对象之上,方便全局调用
uni.$http = $http
// 请求根路径 <<<<<<<<<<<<<< 记得改一下请求路径
$http.baseUrl = "http://localhost:6450"
// 请求拦截器
$http.beforeRequest = function(options) {
	// 提示加载中
	uni.showLoading({
		title: "数据加载中..."
	})

	// 请求头添加token
	const token = uni.getStorageSync('token');
	if (token) {
		options.header = {
			token
		}
	}
}
// 响应拦截器
$http.afterRequest = function(res) {	
	// 关闭提示
	uni.hideLoading();
}

3、发起请求

async onLoad() {
	// 发起请求,模拟一个登入请求
	const res= await uni.$http.get("/user/login")
	//打印请求结果
	console.log("请求结果:::",res);
	//判断请求结果,并执行对应的逻辑
	if(res.data.code==200){
		console.log("请求成功,执行登入成功逻辑");
	}else{
		console.log("请求失败,执行登入失败逻辑");
	}
},

4、请求成功

可以看到请求成功了,并执行了登入成功的逻辑。
uniapp微信小程序请求封装,uni-app,微信小程序,小程序

以上就是官方的使用方法,虽然能够发起请求,但还存在一些问题,要运用到项目中还需要进行一些优化。

1、对处理请求结果进行优化

每次发起请求后,都要自己写if语句判断请求是否成功,非常麻烦。我们可以修改一下源码解决这个问题。
找到图中的文件
uniapp微信小程序请求封装,uni-app,微信小程序,小程序
找到success的回调,大概在62行
uniapp微信小程序请求封装,uni-app,微信小程序,小程序
对 success 的回调进行改造:

success: (res) => {
	// 首先打印看一下res的层级,每个人的后端给的res层级可能不一样。
	// console.log("响应结果:::",res);
					
	// 判断请求的结果
	if(res.data.code==200){						
		// 请求成功,返回data数据
		resolve(res.data.data)
	}else{
		// 请求失败,抛出异常,阻止代码继续运行
		reject(res)
	}
},

再次发起请求就不用手动判断了

async onLoad() {
	const res = await uni.$http.get("/user/login")
	//打印请求结果
	console.log("请求结果:::", res);
	// 如果登入失败,下面的代码就不会执行
	console.log("请求成功,执行登入成功逻辑");
},

可以看到请求成功了,而且直接就拿到了data数据,没有那些code,msg等无用的数据了。
uniapp微信小程序请求封装,uni-app,微信小程序,小程序

不过还有个问题,就是 uniapp 项目的 .gitignore文件 通常会忽略掉 node_modules目录,就导致我的修改的源码上传不到git仓库,别人拉下来还是原来的。
uniapp微信小程序请求封装,uni-app,微信小程序,小程序

怎么解决呢?我们可以把 node_modules目录 下的 @escook目录 复制一份到 util目录 下

uniapp微信小程序请求封装,uni-app,微信小程序,小程序

然后把引入的地址改成 util目录 下的路径
uniapp微信小程序请求封装,uni-app,微信小程序,小程序

2、对引入的方式进行优化

如果你觉得直接引入到 main.js 中导致代码可读性差。
你可以新建一个.js文件,把引入的代码放到.js文件中,例:
uniapp微信小程序请求封装,uni-app,微信小程序,小程序

然后在main.js引入你刚才创建的.js文件,这样就干净多啦
uniapp微信小程序请求封装,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-686051.html

到了这里,关于uniapp微信小程序封装网络请求 @escook/request-miniprogram的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序 封装axios 包含请求拦截、响应拦截、无感刷新令牌功能

    前言: 1、为什么不适用uniapp自带的请求功能? 答:uniapp自带的请求功能,再刷新了令牌后,重新请求返回的数据无法返回给发起请求的方法。也就是说,刷新令牌后重新发起的请求和第一次发起请求的方法是割裂的。 2、封装文件中,我设置了无感刷新令牌功能。我后台的

    2024年02月03日
    浏览(63)
  • 微信小程序基于Promise封装发起网络请求

         

    2024年02月17日
    浏览(54)
  • 微信小程序封装网络请求设置超时5min不生效

    背景: 开发微信小程序时,由于有些业务场景特殊,接口返回时间较长,因此使用flyio封装网络请求时将timeout设置为5min。 问题: 设置timeout为5min,发现请求时长超过1min后请求自动断开了。 解决方案: 除了在网络请求那设置,还需要在app.json中设置networkTimeout中的request属性

    2024年01月17日
    浏览(53)
  • 【7 微信小程序学习 - 小程序的系统API调用,网络请求封装】

    请求数据,保存数据 需要封装为单独的函数,不然不是异步的 (推荐,可配置不同基础URL的多个实例)

    2024年02月09日
    浏览(42)
  • 小程序配置网络请求@escook/request-miniprogram

    由于平台限制,小程序项目不支持axios, 原生wx.request() API功能较为简单, 不支持拦截器 等功能。所以使用@escook/request-miniprogram第三方包发起网络数据请求 配置步骤: 官方文档:https://www.npmjs.com/package/@escook/request-miniprogram 1.找到项目路径,输入cmd进入命令行 2. 安装,输入

    2024年02月13日
    浏览(334)
  • 微信小程序封装请求

    封装请求 解决的问题 很多页面中请求的 url 前半部分都是一样的,重复书写导致页面代码冗余复杂同时逻辑容易不清晰,所以采用单独将请求封装成一个文件(模块)使得这些问题得到解决。 前期基础知识 uni.request(wx.request) Promise 具体步骤 创建文件夹及文件 在根目录下

    2024年02月11日
    浏览(44)
  • 微信小程序 封装request请求

    创建 utils 文件夹后创建 api 文件夹创建 request.js 创建 index.js

    2024年02月15日
    浏览(48)
  • 微信小程序封装wx.request请求

    对微信小程序的印象我还停留在2年前刚入行的时候,那是还不懂什么是Promise,只知道小程序发请求有时候要在success回调中嵌套好多层(后来我才知道这叫 回调地狱 )。最近刚好有个小程序的项目交给我发开发,加上如今的我自认为对Promise掌握的还可以,所以这次也尝试着封

    2024年02月16日
    浏览(45)
  • 微信小程序 wx.request 请求封装

    1、添加一些统一的参数或者配置 2、加上默认的请求头和cookie(有就加,没有就为空) 3、将参数,即传入的url地址、请求头传入请求中 4、封装 post 和 get 请求,使代码使用更加方便,以维护

    2024年02月16日
    浏览(41)
  • 微信小程序HTTP请求封装,复习指南

    // 配置文件 const config = require(‘./config.js’) var app = getApp(); const host = config.httpServer; // 服务器baseUrl /** POST请求, URL:接口 postData:参数,json类型 doSuccess:成功的回调函数 doFail:失败的回调函数 */ function postData(url, postData, doSuccess, doFail) { wx.request({ //项目的真正接口,通过字

    2024年04月15日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包