微信小程序的数据请求和封装

最新推荐文章于 2023-02-27 21:22:01 发布
最新推荐文章于 2023-02-27 21:22:01 发布
阅读量429 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Taoosii/article/details/109229672
版权

怎么封装微信小程序的数据请求

目录结构
在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在这里插入图片描述
在根目录下创建env目录,创建index.js配置并导出多个开发环境在这里插入图片描述
在这里插入图片描述
在api.js中统一管理，请求的url地址
在这里插入图片描述
在fetch.js中用promise对wx.request()进行封装
在这里插入图片描述
在http.js，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；
设置对应的方法并导出；在这里插入图片描述
在全局app.js中导入http,注册到根组件
在这里插入图片描述
在具体页面导入,并使用；
在这里插入图片描述

Taoosii
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于微信小程序：封装请求
m0_55546349的博客
04-19 2494
新建一个文件夹request（随便起） 新建env.js 2.1 在这里，配置接口地址的公共地址部分、方便后续引用。 //这里使用的接口呢都是自己模拟的，可以根据自己的需求进行添加 module.exports={ //开发环境的url dev:{ baseUrl:"http://xxxx" }, //测试环境url test:{ // baseUrl:"http:..
微信小程序封装request请求
最新发布
m0_60689237的博客
02-07 641
会造成代码的冗余，例如，我们在网络请求失败的时候，可能都是只需要提示一下请求失败就好了。仔细想一想，其实我们的最终目的是要对不同的结果进行不同的处理，那我们也不一定要把这个结果拿到来再进行处理。我们在封装时，把各个请求相同的部分进行封装就好了，不同的地方要保留住。例如，我们对于各个请求成功后，可能会根据返回的数据进行不同的处理，此时就需要保留请求成功后的数据处理能力。改进后我们发现，sucess函数不再是写死的了，我们在调用这个request时，就可以根据不同的需求，对res进行不同的操作了。
wx小程序axios二次封装
Charlotte_99的博客
06-22 573
axios二次封装
微信小程序请求封装
weixin_53068161的博客
07-16 4308
官方文档提供微信小程序发送请求的方法有wx.request，但每次发送请求都调用该接口会十分不便于接口的管理。所以通过封装请求的方法来对接口进行集中式控制管理，简化代码的维护流程。文章使用的案例文件结构。.........
微信小程序封装api请求步骤
geng97280的博客
01-28 3417
微信小程序封装api请求步骤
微信小程序封装接口
m0_59006402的博客
05-19 195
app.js //这里是post请求 apiPost: function (url, data, callback) { var that = this; //请求头 var header = { 'content-type': 'application/x-www-form-urlencoded' }; //请求 wx.request({ url: url, data: data, method.
微信小程序网络请求封装示例
10-18
主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序request请求封装，验签代码实例
10-15
主要介绍了微信小程序request请求封装，验签代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
详解微信小程序网络请求接口封装实例
10-17
主要介绍了微信小程序网络请求接口封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序HTTP接口请求封装代码实例
10-16
主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
【uniapp&微信小程序】封装uni.request()
Ghmin的博客
02-27 1万+
在项目开发过程中，往往需要对请求进行二次封装，这篇文章将对uni.request()进行二次封装，并实现多个环境的请求配置，对请求方式，数据格式等进行封装，将请求做到最简化。可以看到，封装之后的请求已经非常精简，配置好各个环境地址，根据请求方式，数据格式，选择对应的封装方法即可。
微信小程序promise封装网络请求（wx.request）
coldriversnow的专栏
08-24 2042
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。如果我们需要使用很多接口请求数据，每次都写一遍，会造成大量的代码冗余，我们可以将wx.request进行二次封装来实现调用。其中BaseAPI为需要发送网络请求的公共部分，在GET的 '' 中填入后半部分，封装好的函数会实现地址的拼接，data为发送的参数。url是请求的接口地址，data是需要发送的数据，header是请求头，success是成功回调函数，method是请求类型...
微信小程序如何封装数据请求
weixin_45564474的博客
05-12 3914
完成一个小程序项目，我们肯定会请求跟多接口，为了我们代码的可读性和可维护性更好，我们可以将我们请求的接口进行封装。封装步骤如下。 1.首先在根目录下创建一个http文件夹，在文件夹下分别创建：env.js,api.js,request.js三个文件。好了废话不多数直接上代码。 env.js代码如下 //设置公共访问的url，即环境变量 module.exports = { // 开发环境 dev: { baseUrl: 'http://localhost:3000' }, // 测
微信小程序封装wx.request请求以及携带token
热门推荐
Time_Flies_lei的博客
12-14 1万+
首先在pages中新建一个api的文件夹，对ajax请求统一管理，文件夹中request.js完成对wx.request的封装，在index.js中完成接口管理，目录以下图：ajax 在request.js中对wx.request进行封装，代码以下：json var tokenKey = "access-token"; var serverUrl = "http://124.204.51.174:8080/gcs"; // 例外不用token的地址 var excep...
如何封装微信小程序数据请求
XiehaiyanLI的博客
08-08 957
封装数据请求 一、为什么要对数据请求进行封装？ 不封装的话，不说代码写的多，看的人也不想看，代码多余复杂。对代码进行封装，只要把前面的公共地址拿出来配置一下，自己用起来方便，别人修改也只用改改后缀的路径，如果有专属域名，就把专属域名用模板字符串拼接在中间就可以了。封装后的代码简洁、方便，为了方便管理数据。 二、对请求进行封装 首先封装数据请求，环境地址的统一 //env.js module.exports={ //开发环境 dev:{ baseUrl:'http://127.0.0.1:
怎么封装微信小程序的数据请求呢？？
ZXH0122的博客
11-09 243
const baseUrl = 'https://api.it120.cc'; const http = ({ url = '', param = {}, ...other } = {}) => { wx.showLoading({ title: '请求中，请耐心等待..' }); let timeStart = Date.now(); return new Promise((resolve, reject) => { wx.re
微信小程序 网络请求封装
yechaoa
07-27 4024
封装的意义在于使用起来更高效简洁 network.js post请求和get请求不一样的地方在于header中的content-type参数和method参数 function postRequestLoading(url, params, message, success, fail) { if (message != "") { wx.showLoa...
微信小程序封装请求方法wx.request(OBJECT)
stromGui同视
01-24 1万+
小程序写完也一段时间了，最近分享下装逼的技能吧，封装请求方法，不但高大上，而且使用简单。先说说小程序自带的请求吧！ wx.request(OBJECT) 参数： 参数名 类型 必填 默认值 说明 url String 是 开发者服务器接口地址 data Object/String/ArrayBuffer 否
微信小程序 网络请求封装 promise方式
03-30
在微信小程序中，可以使用wx.request()方法进行网络请求，但是使用Promise可以更加方便地处理异步请求。 下面是一个网络请求的封装，使用Promise方式： ```js const request = (url, method, data) => { return ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值