Detailed explanation and examples of WeChat applet wx.request (interface calling method)

WeChat applet wx.request----Interface calling method

Recently, I developed a WeChat applet version of the task management system. I encountered some problems when sending interfaces to the Java backend. Here is a brief summary.

Official interface

The official interface is called wx.request, and the request method is relatively simple. The following is a request example given on the official website.

wx.request({
 url: 'test.php', //仅为示例，并非真实的接口地址
 data: {
   x: '' ,
   y: ''
 },
 header: {
   'content-type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 }
})

Problems

The content-type in the header of wx.request request defaults to application/json. If we want to change the method, such as using "application/x-www-form-urlencoded", we will find that the default application/json is not replaced in the request header information. Instead, this method has been added. In addition, when requesting with jquery.ajax, even if the application/json method is used to request, the data format obtained is different. No matter what request method is used, ajax will convert the request data into &name1=value1&name2 =value2 form, this will cause problems when parsing the request data based on content-type. I don’t know if WeChat does this intentionally or if it is simply a bug. In short, it brought me unnecessary trouble.

The WeChat applet sends https requests. You can use http when debugging locally. If you verify the request method and domain name when testing on a mobile phone, if it is illegal, the following error will be reported:

In order to facilitate the request, we can make a simple encapsulation of wx.request, which will be much more convenient when we call it again. The code is as follows:

var app = getApp();
function request(url,postData,doSuccess,doFail,doComplete){
   var host = getApp().conf.host;
   wx.request({
    url: host+url,
    data:postData,
    method: 'POST', 
    success: function(res){
     if(typeof doSuccess == "function"){
       doSuccess(res);
     }
    },
    fail: function() {
     if(typeof doFail == "function"){
       doFail();
     }
    },
    complete: function() {
     if(typeof doComplete == "function"){
       doComplete();
     }
    }
   });
 }
}
 
module.exports.request = request;

If an interface is frequently used in different places, I originally thought of writing a function and then exposing the function for other js calls. However, I later found that setting async in wx.request is invalid and can only send asynchronous requests, so if I want to write a function It is more difficult to return the data obtained by calling the interface.

Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more detailed explanations and examples of WeChat applet wx.request (interface calling method) related articles, please pay attention to the PHP Chinese website!