Graphic explanation of http requests of WeChat applets

This article mainly introduces the text details of http requests for applets. For more information, see the following article, for more information, see

Network communication in a applet can only communicate with the specified domain name. The applet contains four types of network requests.

1. Common HTTPS request (wx. request)

2. Upload a file (wx. uploadFile)

3. Download File (wx. downloadFile)

4. WebSocket communication (wx. connectSocket)
   

Here we will introduce three network requests: wx. request, wx. uploadFile, and wx. dowloadFile.

SET domain name

To enable network communication with a applet, you must set the domain name first. Otherwise, an error occurs:

The URL domain name is invalid. please configure it in the mp background and try again

You need to set the domain name in the applet of the public platform.
On the setup page of the applet, you can see the setting options:

You can use wx. request to initiate an http request.At the same time, there are only five network requests.

function queryRequest(data){    wx.request({    url:"https://example.com/api/",    data:data,    header:{      // "Content-Type":"application/json"    },    success:function(res){      console.log(res.data)    },    fail:function(err){      console.log(err)    }  })}

The above code sends an http get request and prints the returned result. The parameters are also easy to understand.

1. Url server url

2. Data request parameters can be in the format of String data: "xxx = xxx & xxx = xxx" or Object data: {"userId": 1 }.

3. Header: Set the request header.

4. Successful callback of success interface

5. Callback for failed fail interface
   

Two other parameters are not included in the code:

Method http method. the default value is GET request.

After the complete API is called, the API is called no matter whether it is successful or fails.

Upload files

The file Upload api is wx. uploadFile, which initiates an http post request with the Content-type multipart/form-data. The server needs to receive files according to the Content-type. sample code:

function uploadFile(file,data) {  wx.uploadFile({    url: 'http://example.com/upload',    filePath: file,    name: 'file',    formData:data,    success:function(res){      console.log(res.data)    },    fail:function(err){      console.log(err)    }  })}

The url, header, success, fail, complete and common http requests are the same.
The differences are as follows:

The key corresponding to the name File. the server needs to obtain the file through the name parameter.

Other parameters that can be used in formData http requests

Download Files

The file download api is wx. downloadFile, which initiates an http get request and returns the temporary file path after the download is successful. sample code:

function downloadFile(url,typ,success){  wx.downloadFile({    url:url,    type:typ,    success:function(res){      if(success){        success(res.tempFilePath)      }    },    fail:function(err){      console.log(err)    }  })}

The url, header, fail, complete, and wx. uploadFile parameters are used in the same way. The different parameters are as follows:

Type: the type of the resource to be downloaded. it is used for automatic identification by the client. the available parameters include image, audio, and video.

Success: callback after successful download. the temporary directory of the file is returned with the parameter tempFilePath: res = {tempFilePath: 'File path '}

After the download is successful, a temporary file can only be used during the current running of the program. to save the file persistently, you need to call the wx. saveFile method to actively persist the file. the instance code is as follows:

function svaeFile(tempFile,success){ wx.saveFile({   tempFilePath:tempFile,   success:function(res){     var svaedFile=res.savedFilePath     if(success){       success(svaeFile)     }   } })}

Use wx. saveFile to save the temporary file to the local device and provide it to the applet for use at next startup. the parameters are as follows:

1. TempFilePath: Path of the file to be saved

2. Callback of successful success storage, and return the successfully saved path. you can use res. savedFilePath to obtain the successfully saved path.

3. Fail failure callback

4. Complete callback
   

Timeout settings

In applet development: MINA has mentioned that setting networkTimeout in app. js can set four types of network access timeout:

"networkTimeout":{  "request": 10000,  "connectSocket": 10000,  "uploadFile": 10000,  "downloadFile": 10000}

The timeout value corresponds to four types of network requests.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

The above is the detailed text of the http request of the applet. For more information, see other related articles in the first PHP community!