Detailed explanation of WeChat applet request network request operation example

The mini program provides many APIs, which greatly facilitates developers. Among them, the network request API is wx.request(object), which is the one that implements data interaction between the mini program and the developer's server. Very important API. This article mainly introduces the WeChat applet's use of the request network request operation, and analyzes the specific usage skills of the wx.request(object) network request operation in the form of examples. Friends in need can refer to it. I hope it can help everyone.

The official parameter description is as follows

OBJECT parameter description:

##Parameter name	Type	Required	Description
url	String	is	Developer server interface address
data	Object、String	No	Request parameters
header	Object	No	Set the request header, Referer cannot be set in the header
method	String	No	Default is GET, valid values: OPTIONS, GET, HEAD, POST, PUT , DELETE, TRACE, CONNECT
success	Function	No	Receive the callback function successfully returned by the developer service, res = {data: 'Content returned by the developer server'}
fail	Function	No	Callback for failed interface call Function
complete	Function	No	The callback function at the end of the interface call (will be executed if the call is successful or failed)

The simplest usage is as follows (take POST request as Example)

bindSearchChange:function(e){
 var keyword = e.detail.value;
 wx.request({
 url:'xxxxxxxxx',
 data:{},
 header: {'Content-Type': 'application/json'},
 success: function(res) {
 console.log(res)
 }
 })
}

Below we write the request in the http.js file under the service file, the code is as follows

var rootDocment = 'hxxxxx';//你的域名
function req(url,data,cb){
 wx.request({
 url: rootDocment + url,
 data: data,
 method: 'post',
 header: {'Content-Type': 'application/json'},
 success: function(res){
 return typeof cb == "function" && cb(res.data)
 },
 fail: function(){
 return typeof cb == "function" && cb(false)
 }
 })
}
module.exports = {
 req: req
}

module.exports exposes the req method so that it can be used in other files. Since the js function is executed asynchronously, the return function is the callback function, not the specific data

In order to facilitate other files to call this method, we register it as a global function in the app.js file in the root directory, as follows

//app.js
var http = require('service/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.login({
 success: function () {
  wx.getUserInfo({
  success: function (res) {
  that.globalData.userInfo = res.userInfo
  typeof cb == "function" && cb(that.globalData.userInfo)
  }
  })
 }
 })
 }
 },
 globalData:{
 userInfo:null
 },
 func:{
 req:http.req
 }
})

At this time, this req It is global. When calling, we can use

getApp.func.req() to call. The details are as follows

var app = getApp()
Page({
 data: {
 },
 onLoad: function (opt) {
 //console.log(opt.name)
 app.func.req('/api/get_data',{},function(res){
 console.log(res)
 });
 }
})

WeChat applet provides Many APIs, including network, media, data, etc., also provide many components, making it very convenient to develop small programs.

Related recommendations:

Summary of functions of WeChat mini program

Tutorial on implementing the function of adding mobile phone contacts to WeChat mini program

How to implement the WeChat applet display drop-down list function

The above is the detailed content of Detailed explanation of WeChat applet request network request operation example. For more information, please follow other related articles on the PHP Chinese website!