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

2024-11-29 16:02:51

微信小程序 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请求代码，实际代码中如果每次这样来写是比较繁琐的，那我们就来做一下封装。

那代码中我们比较关注什么？

1.请求的参数，访问的接口
2.GET/POST...请求方式
3.请求参数统一处理（比如：加密、设置公共参数...）
4.请求成功返回的数据（比如：解密、抽离逻辑层数据）
5.请求失败反馈

我们不关注什么？

1.请求url（一般固定的配置在某个地方）
2.根据不同的接口规则做不同的请求参数（比如：参数加密等）
...

让我们代码实操

network.js

var API_URL = 'http://localhost/loverule/api/api.php'

var requestHandler = {
  params:{},
  success: function(res){
    // success
  },
  fail: function() {
    // fail
  },
}

//GET请求
function GET(requestHandler) {
  request('GET',requestHandler)
}
//POST请求
function POST(requestHandler) {
  request('POST',requestHandler)
}

function request(method,requestHandler) {
  //注意：可以对params加密等处理
  var params = requestHandler.params;

  wx.request({
   url: API_URL,
   data: params,
   method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   // header: {}, // 设置请求的 header
   success: function(res){
    //注意：可以对参数解密等处理
    requestHandler.success(res)
   },
   fail: function() {
    requestHandler.fail()
   },
   complete: function() {
    // complete
   }
  })
}

module.exports = {
 GET: GET,
 POST: POST
}

1.页面中调用（以GET请求为例）

  //导入js
  var network = require("../../utils/network.js")

  //写入参数
  var params = new Object()
  params.api_name = "api_user_login"
  params.account = "hanqing"
  params.password = "123456"

  //发起请求
  network.GET(
  {
    params: params,
    success: function (res) {
     console.log(res)
     //拿到解密后的数据，进行代码逻辑

    },
    fail: function () {
     //失败后的逻辑

    },
  })

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序设置http请求的步骤详解

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请
微信小程序请求前置的方法详解

问题因为我们有的页面是在onload中去请求数据回来再渲染视图,如果我们可以将请求数据这一步提前到小程序页面跳转前做,就可以早一点把数据请求回来,优化的效果取决于页面跳转所需的时间. 需求需要一种请求前置方法充分利用跳转的时间,预先请求接口数据,但是要尽量减少对旧项目的改造成本.因为现在我负责的小程序项目是用axios来请求接口数据,所以这里只举例axios中post的改造的思路.我这里是通过改写post方法,在请求的时候对需要预先请求的接口进行缓存,等第二次请求的时候返回第一次请求的pro
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分
微信小程序网络请求封装示例

网络请求网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊. // 官方例子 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 小程
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序网络请求(GET请求)详解

微信小程序网络请求 GET 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接. 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序. 2.wx.request(OBJECT) 参数说明: 微信小程序支持GET,POST等请求.用method可以设置. 以下是GET请求的代码: <span style="font-size:18px;">//rate.js //获取应用实例
微信小程序之GET请求的实例详解

微信小程序之GET请求的实例详解学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat
微信小程序网络请求（post请求，get请求）

微信小程序网络请求 1.post请求: onLoad: function() { that = this; wx.request( { url: "url", header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: {}, complete: function( res ) { console.log(res
微信小程序HTTP接口请求封装代码实例

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

微信小程序 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 ); } }) 以上
微信小程序 MD5的方法详解及实例代码

微信小程序 MD5的方法详解生成的文件可以放在 utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt
微信小程序 location API接口详解及实例代码

微信小程序 location API 接口: 现在微信小程序火了 ,利用假期时间学习了下,微信小程序的基础知识,嘿嘿! 以下是记录学习微信小程序 location API接口,并且写了一个小实例来记录,如有错误之处还请指正. 微信小程序的位置接口共有两个: 1.wx.getLocation(OBJECT)获取当前的地理位置.速度. 2.wx.openLocation(OBJECT) 使用微信内置地图查看位置然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,让
微信小程序日历组件calendar详解及实例

微信小程序日历组件calendar详解及实例模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('
微信小程序常用工具类详解及实例

微信小程序常用工具类详解前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut
微信小程序使用picker封装省市区三级联动实例代码

微信小程序使用picker封装省市区三级联动实例目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法
微信小程序网络请求API详解

wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var
微信小程序网络请求API详解

wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var
微信小程序前端源码详解及实例分析

微信小程序前端源码逻辑和工作流看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLau

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

相关推荐

随机推荐