微信小程序请求封装(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)
      }
    })
  }
})


相关文章
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
1383 20
|
JSON 数据格式
.net HTTP请求类封装
`HttpRequestHelper` 是一个用于简化 HTTP 请求的辅助类,支持发送 GET 和 POST 请求。它使用 `HttpClient` 发起请求,并通过 `Newtonsoft.Json` 处理 JSON 数据。示例展示了如何使用该类发送请求并处理响应。注意事项包括:简单的错误处理、需安装 `Newtonsoft.Json` 依赖,以及建议重用 `HttpClient` 实例以优化性能。
796 2
|
安全 API 网络安全
使用OkHttp进行HTTPS请求的Kotlin实现
使用OkHttp进行HTTPS请求的Kotlin实现
|
JSON Dart API
Flutter dio http 封装指南说明
本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。
707 2
Flutter dio http 封装指南说明
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
1004 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
Java Spring
spring restTemplate 进行http请求的工具类封装
spring restTemplate 进行http请求的工具类封装
955 3
|
安全 Java 网络安全
RestTemplate进行https请求时适配信任证书
RestTemplate进行https请求时适配信任证书
1529 3
|
安全 网络安全 数据安全/隐私保护
HTTPS 请求中的证书验证详解(Python版)
HTTPS 请求中的证书验证详解(Python版)
1282 0