Detailed graphic and text explanation of WeChat applet http request

This article mainly introduces the relevant information about the detailed graphic and text explanation of the HTTP request of the WeChat applet. Friends in need can refer to it.

Network communication in the WeChat applet can only communicate with the specified domain name. , WeChat applet includes four types of network requests.

1. Normal HTTPS request (wx.request)

2. Upload file (wx.uploadFile)

3. Download file (wx.downloadFile)

4. WebSocket communication (wx.connectSocket)
   

##Here to introduce wx.request,wx .uploadFile, wx.dowloadFile are the main three types of network requests

Set the domain name

If you want the WeChat applet to communicate on the network, you must first set the domain name, otherwise it will An error occurred:

The URL domain name is illegal, please try again after mp background configuration

You need to set the domain name in the mini program of the WeChat public platform.

You can see the setting options in the setting interface of the WeChat applet:

Settings

Select development settings:

Development settings

You can see the server settings:

Server settings

Here you can set the domain names corresponding to four types of network access. Each type of network request needs to set a domain name. Note that if the domain name is set here to https://example.com/api/, then https ://example.com/api cannot be called and must be followed by /.

http request

Use wx.request to initiate an http request. A WeChat applet is limited to

Only 5 at the same time Network request.

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 will send an http get request and then print out the returned results. The parameters are also relatively easy to understand.

1. url The url address of the server

2. data The requested parameters can be

   String data:"xxx=xxx&xxx=xxx " in the form or Object data:{"userId":1} in the form

3. header Set the request header

4. success

   InterfaceSuccess callback

5. fail Interface failure callback

   
   

There are also two parameters Not in the code:

method http method, defaults to GET request

complete callback after calling the interface, the interface will be called regardless of success or failure

Upload files

The api for uploading files is wx.uploadFile, which will initiate an http

post request, in which Content- type is multipart/form-data. The server needs to receive files according to the Content-type 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 and complete are the same as ordinary http requests.

The parameters that are different here are:

The

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

formData http request can be Other parameters used

Download file

The api for downloading files is wx.downloadFile, which will initiate an http get request and After the download is successful, the temporary path of the file is returned. 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 parameters of url, header, fail, complete and wx.uploadFile are consistent. The parameters that are different are:

type: The type of the downloaded resource, used for automatic identification by the client. The parameters that can be used are image/audio/video.

success: The callback after the download is successful. The temporary file is returned with the tempFilePath parameter. Directory: res={tempFilePath:'File Path'}

After successful download, it is a temporary file, which can only be used during the current running of the program. If you need to save it permanently, you need to call the method wx .saveFile actively persists files, example code:

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

Use wx.saveFile to save temporary files locally and provide them for use when the applet is started next time. The parameters are:

1. tempFilePath The path of the file that needs to be saved

2. success Callback for successful saving, returns the path of successful saving, use res.savedFilePath to obtain the saved file Success path

3. fail failure callback

4. complete end callback

   
   

超时的设置

在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间：

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

这里设置的超时时间对应着四种类型的网络请求。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

The above is the detailed content of Detailed graphic and text explanation of WeChat applet http request. For more information, please follow other related articles on the PHP Chinese website!