微信小程序HTTP接口请求封装代码实例

2024-10-22 19:22:10

1.方法封装（新建文件夹util，工具文件，在文件夹下创建request.js文件，用于对方法封装）

request.js：

var app = getApp();
//项目URL相同部分，减轻代码量，同时方便项目迁移
//这里因为我是本地调试，所以host不规范，实际上应该是你备案的域名信息
var host = 'http://localhost:8081/demo/';

/**
 * POST请求，
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
function request(url, postData, doSuccess, doFail) {
 wx.request({
  //项目的真正接口，通过字符串拼接方式实现
  url: host + url,
  header: {
   "content-type": "application/json;charset=UTF-8"
  },
  data: postData,
  method: 'POST',
  success: function (res) {
   //参数值为res.data,直接将返回的数据传入
   doSuccess(res.data);
  },
  fail: function () {
   doFail();
  },
 })
}

//GET请求，不需传参，直接URL调用，
function getData(url, doSuccess, doFail) {
 wx.request({
  url: host + url,
  header: {
   "content-type": "application/json;charset=UTF-8"
  },
  method: 'GET',
  success: function (res) {
   doSuccess(res.data);
  },
  fail: function () {
   doFail();
  },
 })
}
/**
 * module.exports用来导出代码
 * js文件中通过var call = require("../util/request.js") 加载
 * 在引入引入文件的时候" "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
 * 项目目录不止一级，不同的js文件对应的工具类的位置不一样
 */
module.exports.request = request;
module.exports.getData = getData;

2.page里面随便一个创建一个文件夹，创建四种文件，在js里面加入　

//引入代码
var call = require("../util/request.js")

Page({
 data: {
  pictureList: [],
 },

 onLoad: function () {
  var that = this;
  //调用封装的方法，为了方便我直接在页面加载的时候执行这个方法
  call.getData('lunbo.do', this.shuffleSuc, this.fail);
  // 无用，前面忘记注释，抱歉
  // this.loadMsgData(that);
 },
 shuffleSuc: function (data) {
  var that = this;
  that.setData({
   pictureList: data.rows
  })
  //我后面测试了一下，直接this.setData也可以，但是因为我在没有使用封装方法的时候
  //this.setData报过错，不能直接用this，所以我在赋值的时候一般都会加上var that = this;
  //这句话算是一个不是习惯的习惯
 },
 fail: function () {
  console.log("失败")
 },
})

将回调函数写在page里面，在调用封装方法的时候通过this.方法名调用，这样就能确保that.setData方法有效，如果是写在外面的function方法小程序编译器不会报错，但是在wxml中bindtap无效，我也没深究，同时在call.getData方法中调用的时候虽然能够进入该方法，但是赋值是无效的，所以我不建议用这种方式：

function shuffleSuc(data) {
 var that = this;
 that.setData({
  pictureList: data.rows
 })
}

3. 运行之后通过小程序的控制台AppData可以打印data里面的值，同时也可以根据需要在页面中显示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序封装http请求实例详解

微信小程序封装http请求最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112 下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (ur
微信小程序 http请求封装详解及实例代码

微信小程序 http请求封装示例代码 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) }, fail: function( res ) { fail( res ); } }) 以上
封装微信小程序http拦截器过程解析

前言微信小程序是数据驱动的应用,开发技术和vue.react和angular等mv*技术类似.在vue下可以用vue-resource.axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能. 第一步:创建一个request.js文件第二步:确定http.upload和websocket前缀第三步:封装wx.request 在请求发出前处理http地址.请求头和参数.
微信小程序HTTP接口请求封装的实现

最近在学习小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,我的项目后端是使用的Java SSM框架,wx.request的URL就是后端提供的接口.在封装的时候我在网上看了很多篇博客,90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的,但是我们都知道微信小程序的数据是实现数据绑定的,这一点和Vue框架很像,而在Vue框架的JS文件中我们可以通
微信小程序封装的HTTP请求示例【附升级版】

本文实例讲述了微信小程序封装的HTTP请求.分享给大家供大家参考,具体如下: 微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装. 在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例. 废话不多说,先上代码: //全局对象httpClient httpClient:{ request:function(method,url,data){ //返回一个promise实例 return new Prom
微信小程序封装http访问网络库实例代码

微信小程序封装http访问网络库实例代码之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 代码如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(
微信小程序class封装http代码实例

这篇文章主要介绍了微信小程序class封装http,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} utils/http.js import {config} from "../config"; class HTTP{ request(
微信小程序HTTP接口请求封装代码实例

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回
微信小程序 request接口的封装实例代码

微信小程序 request接口的封装实例代码小程序request接口的封装(本质上是对request回调函数再次回调) module.exports.getData = function (url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var method = arguments.length > 2 && arguments[
mpvue微信小程序的接口请求fly全局拦截代码实例

这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下业务要求: 需要进入页面时就要游客登陆拿到token: 之后的接口都是需要这个token: 其他操作则需要授权登陆,此时的token已失效: token过久之后会过期: 业务实现: 1.全局拦截 fly.interceptors.request.use(request => { const token = storage.get
微信小程序左滑删除实现代码实例

这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="co
微信小程序左右滚动公告栏效果代码实例

这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> &l
微信小程序实现一个简单swiper代码实例

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha
微信小程序-form表单提交代码实例

效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="isPub" /> </view&
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同
微信小程序实现上传照片代码实例解析

纸上谈坑在我实现了这个功能之前,我讲讲我是怎么在这个坑里爬上来的: 我实现上传文件后端的接口的参数是String类型的前台传的参数:http://tmp/wx忽略很多字母数字.png 但由于这张是本地照片url(外网无法访问),我后台拿到的是一个String类型,是没有办法是去识别这是一张图片的,访问不了这个数据,仅仅把它当做字符串而已.(低级错误) 代码实现前言:后端接受文件有2种方式(参数): 1. MultipartFile 2.base64 微信上传文件的开发文档小程序代码 <!

微信小程序HTTP接口请求封装代码实例

相关推荐

随机推荐