WeChat applet development combat (21): initiate HTTPS request

There is a request method in the wx object, which can initiate HTTPS requests. This method has only one object type parameter. The object support is as follows.

  • url: String type, required, developer server interface address, must use the configured domain name

  • data: Object or String type, optional, requested parameter

  • header: Object type, optional, set the requested header, referer cannot be set in the header

  • method: String type, optional, request method, default is GET, valid values: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

  • dataType: String type, optional, type of response data, default is json. If the dataType is set to json, it will try to do a JSON.parse on the response data

  • success: Function type, optional, it receives the callback function successfully returned by the developer service, res = {data:'Content returned by the developer server'}

  • fail: Function type, optional, callback function for interface call failure

  • complete: Function type, optional, the callback function for the end of the interface call (the call will be executed if it succeeds or fails)

 

Note that the data attribute can be Object or String type, but the final data sent to the server is String type. If the incoming data is not String type, it will be converted to String. The conversion rules are as follows:

  • For data whose header['content-type'] is'application/json', the data will be serialized in JSON

  • For data whose header['content-type'] is'application/x-www-form-urlencoded', the data will be converted into query string (encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v) ...).

To test the wx.request method, you first need a link using https, and the domain name of the link needs to be the same as the one set in the applet server configuration. Readers can use the second-level domain name of Tencent Cloud introduced in the previous section, or find an https link online, but be aware that you need to modify the "request legal domain name" configured on the applet server. These https links must be registered in China and have been successfully filed.

For convenience, the following link is used to test the wx.request method. Readers can also use other links, but the response data is required to be in json format, because the code behind will test json data analysis.

https://edu.51cto.com/index.php?do=spree&m=getGifts

Therefore, the "request legal domain name" should be set to https://edu.51cto.com, otherwise the wx.request method cannot request the link.

The following code uses the wx.request method to request the link, and sets the dataType attribute value to text/plain, which will directly return the original string.

wx.request({
  url: 'https://geekori.com/download/test.txt',
  dataType:'text/plain',
  success: function(res) {
    //  在控制台中直接输出返回的数据
    console.log(res.data)
  }
})

After executing this code, the information shown in Figure 1 will be entered in the Console. Obviously, the original json data is returned.

Figure 1 The response data is in plain text form

Now remove the dataType attribute in the previous code, so that the wx.request method will think that json format data is returned (replace test.txt with data.json, and download the json format file can’t set the dataType attribute to text/plain ), and will parse the data in json format, that is, at this time, res.data is no longer a string, but a JSON object. The returned result is shown in Figure 2.

Figure 2 Return data in JSON format

According to the returned data in JSON format, it has been parsed into corresponding object and array formats. For example, if you want to get the value of the batchName attribute of the first element of the coupons array in the data object, you can use the following code.

success: function(res) {
  console.log(res.data.data.coupons[0].batchName);
}

If you are interested in this article, you can add teacher Li Ning's WeChat public account (unitymarvel):

Follow the official account of Geek Origin to get more free technical videos and articles.

Guess you like

Origin blog.csdn.net/nokiaguy/article/details/108114706