Home >WeChat Applet >Mini Program Development >Detailed explanation and examples of WeChat applet wx.request (interface calling method)

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

高洛峰
高洛峰Original
2017-01-09 10:50:025523browse

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:

微信小程序 wx.request(接口调用方式)详解及实例

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!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn