How to use the request network to perform request operations in WeChat mini programs-JS Tutorial-php.cn

How to use the request network to perform request operations in WeChat mini programs

亚连

Release： 2018-06-20 15:47:44

Original

3051 people have browsed it

This article mainly introduces the request network request operation used by WeChat applet, and analyzes the specific usage skills of wx.request(object) network request operation in the form of examples. Friends in need can refer to this article

The example describes the WeChat applet using the request network to request operations. Share it with everyone for your reference, the details are as follows:

The applet provides a lot of APIs, which greatly facilitates developers. Among them, the network request API is wx.request(object), which It is a very important API for data interaction between small programs and the developer's server.

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:&#39;xxxxxxxxx&#39;,
 data:{},
 header: {&#39;Content-Type&#39;: &#39;application/json&#39;},
 success: function(res) {
 console.log(res)
 }
 })
}

Copy after login

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

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

Copy after login

where

module.exports exposes the req method This method can be used in other files. Since the js function is executed asynchronously, the return function is the callback function instead of the specific data.

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

//app.js
var http = require(&#39;service/http.js&#39;)
App({
 onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync(&#39;logs&#39;) || []
 logs.unshift(Date.now())
 wx.setStorageSync(&#39;logs&#39;, 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
 }
})

Copy after login

At this time, the req 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(&#39;/api/get_data&#39;,{},function(res){
 console.log(res)
 });
 }
})

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to determine holidays in js

How to query weather forecast in Angular

How to display input content in Angular

The above is the detailed content of How to use the request network to perform request operations in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!