微信小程序请求封装(http请求详解)

简介: 微信小程序请求封装(http请求详解)

如果你做过Angular或者Vue的话,你会发现,微信小程序跟他们有很多相似的地方,相比来说,小程序要简单一些。http请求的封装也是一样,废话不多说 ,直接上步骤。

1、创建一个http.js,代码如下:

let rootUrl = "http://www.baidu.com";//具体接口域名根据你的实际情况填写
function getData(url,data,cb){
    wx.request({
        url : rootUrl + url,
        data: data,
        method: 'post',
        header: {
          // "Content-Type": "json",   //get请求时候
          "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
        },  
        success: function(res){  
            return typeof cb == "function" && cb(res.data)  
        },  
        fail: function(){  
            return typeof cb == "function" && cb(false)  
        }  
    })
}
module.exports = {
    req : getData //暴露一个方法
}

这段代码有个坑:就是那个请求头header,如果是get请求

header{
  "Content-Type": "json"
}

如果是post请求

header{
  "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写
}

2、在小程序app.js里配置全局函数

var http = require('http/http.js')  //引入刚创建的http.js,地址根据自己的地址填写
App({
  onLaunch: function() {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo: function(cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      //调用登录接口
      wx.getUserInfo({
        withCredentials: false,
        success: function(res) {
          that.globalData.userInfo = res.userInfo
          typeof cb == "function" && cb(that.globalData.userInfo)
        }
      })
    }
  },
  globalData: {
    userInfo: null
  },
  func:{
    req:http.req  //这里配置我们需要的方法
  }
})

3、在项目代码中调用方法

var app = getApp() ;
Page({
  data: {
    title:"111111"
  },
  //事件处理函数
  changeMenus: function(){
      let postdata = {
         userId:12
      }
      app.func.req('/abner/web/getUserByOpenId',postdata,(res)=>{  
           console.log(res)
      }
    })
  }
})


相关文章
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
2月前
|
小程序 Java
小程序通过get请求提交数据到java后台
小程序通过get请求提交数据到java后台
30 0
|
3月前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
4月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
142 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
4月前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
165 1
|
5月前
|
JSON Dart API
Flutter dio http 封装指南说明
本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。
125 2
Flutter dio http 封装指南说明
|
5月前
|
Java Spring
spring restTemplate 进行http请求的工具类封装
spring restTemplate 进行http请求的工具类封装
227 3
|
5月前
|
Go 开发者
golang的http客户端封装
golang的http客户端封装
84 0
|
5月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
92 0
|
5月前
|
小程序 定位技术 开发工具
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
67 0