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


相关文章
|
12月前
|
JSON 监控 API
掌握使用 requests 库发送各种 HTTP 请求和处理 API 响应
本课程全面讲解了使用 Python 的 requests 库进行 API 请求与响应处理,内容涵盖环境搭建、GET 与 POST 请求、参数传递、错误处理、请求头设置及实战项目开发。通过实例教学,学员可掌握基础到高级技巧,并完成天气查询应用等实际项目,适合初学者快速上手网络编程与 API 调用。
1108 130
HTTP协议中请求方式GET 与 POST 什么区别 ?
GET和POST的主要区别在于参数传递方式、安全性和应用场景。GET通过URL传递参数,长度受限且安全性较低,适合获取数据;而POST通过请求体传递参数,安全性更高,适合提交数据。
927 2
|
Go 定位技术
Golang中设置HTTP请求代理的策略
在实际应用中,可能还需要处理代理服务器的连接稳定性、响应时间、以及错误处理等。因此,建议在使用代理时增加适当的错误重试机制,以确保网络请求的健壮性。此外,由于网络编程涉及的细节较多,彻底测试以确认代理配置符合预期的行为也是十分重要的。
473 8
|
JSON JavaScript API
Python模拟HTTP请求实现APP自动签到
Python模拟HTTP请求实现APP自动签到
|
数据采集 JSON Go
Go语言实战案例:实现HTTP客户端请求并解析响应
本文是 Go 网络与并发实战系列的第 2 篇,详细介绍如何使用 Go 构建 HTTP 客户端,涵盖请求发送、响应解析、错误处理、Header 与 Body 提取等流程,并通过实战代码演示如何并发请求多个 URL,适合希望掌握 Go 网络编程基础的开发者。
|
缓存 JavaScript 前端开发
Vue 3 HTTP请求封装导致响应结果无法在浏览器中获取,尽管实际请求已成功。
通过逐项检查和调试,最终可以定位问题所在,修复后便能正常在浏览器中获取响应结果。
458 0
|
Go
如何在Go语言的HTTP请求中设置使用代理服务器
当使用特定的代理时,在某些情况下可能需要认证信息,认证信息可以在代理URL中提供,格式通常是:
777 0
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
557 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
505 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
959 0

热门文章

最新文章