About the steps to set http request for WeChat applet

This article introduces you to the detailed steps of how to make http requests in WeChat mini programs. I believe it will be helpful for everyone to learn network requests in WeChat mini programs. Friends in need can take a look below.

http request introduction

HTTP (HyperText Transfer Protocol) is a set of rules for computers to communicate through the network. Computer experts designed HTTP to enable HTTP clients (such as Web browsers) to request information and services from HTTP servers (Web servers). The current version of the HTTP protocol is 1.1. HTTP is a stateless protocol, and stateless refers to the Web There is no need to establish a persistent connection between the browser and the Web server. This means that when a client makes a request to the server and the Web server returns a response, the connection is closed and no information about the connection is retained on the server. Information.HTTP follows the request/response model. The web browser sends a request to the web server, and the web server processes the request and returns an appropriate response. All HTTP connections are structured as a set of requests and responses.

WeChat applet sets http request

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

1. Ordinary HTTPS request (wx.request)

2. Upload file (wx.uploadFile)

3. Download file (wx.downloadFile)

4. WebSocket communication (wx.connectSocket)

Here we mainly introduce three types of network requests: wx.request,wx.uploadFile,wx.dowloadFile

Set the domain name

If you want the WeChat applet to communicate over the network, you must first set the domain name, otherwise an error will occur:

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 of which Type of network request needs to set a domain name. Note that if the domain name is set to https://example.com/api/, then https://example.com/api cannot be called. must be followed by / .

http request

Use wx.request to initiate an http request. A WeChat applet is Limited to only 5 simultaneous 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 will send an http get request and then print out the returned results. The parameters are also relatively easy to understand.

url The url address of the server

data The requested parameters can be String data:"xxx=xxx&xxx=xxx " format or Object data:{"userId":1} format

header Set the request header

success Interface success callback

fail Interface failure callback

There are also two parameters Not in the code:

method http method, defaults to GET request

complete Callback after the end of the call interface, regardless of The interface will be called on success or failure

Upload file

wx.uploadFile, the api 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)
 }

 })

}

url, header, success, fail and complete are the same as ordinary http requests.

nameThe corresponding key of the file, the server needs to pass nameParameter acquisition file

formData httpOther parameters that can be used in the request

Download file

下载文件的api为wx.downloadFile,该api会发起一个http get请求，并在下载成功之后返回文件的临时路径，示例代码：

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)
 }
 })
}

其中的url,header,fail,complete和wx.uploadFile的参数使用是一致的，其中有区别的参数是:

type:下载资源的类型，用于客户端自动识别，可以使用的参数image/audio/video


success：下载成功之后的回调，以tempFilePath的参数返回文件的临时目录：res={tempFilePath:'文件路径'}


下载成功后的是临时文件，只会在程序本次运行期间可以使用，如果需要持久的保存，需要调用方法wx.saveFile主动持久化文件，实例代码:

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

使用wx.saveFile保存临时文件到本地，提供给小程序下次启动时使用，其中的参数：

tempFilePath 需要被保存文件的路径

success 保存成功的回调，返回保存成功的路径，使用res.savedFilePath可以获取保存成功的路径

fail 失败的回调

complete结束的回调

超时的设置

可以在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序开发教程之增加mixin扩展

微信小程序的MINA文件结构的介绍

微信小程序要怎么选择SSL证书类型

The above is the detailed content of About the steps to set http request for WeChat applet. For more information, please follow other related articles on the PHP Chinese website!