微信小程序网络请求

微信小程序网络请求，客户端与服务器进行交互时，发送的网络数据，称为网络请求。例如，获取用户钱包余额、头像信息等，都需要客户端向服务器发送请求，服务器查询数据库后再把数据传递给客户端。如图所示。

微信小程序开发准备讲解了微信小程序对服务器的配置，在微信开发工具的右上角“详情”单击展开的最底部，如图所示。

勾选则可以发送任何域名，不勾选则只能发送配置过的域名。

发送网络请求

发送网络请求时，调用微信小程序的发送网路请求API“wx.request”即可，参数如表所示：

其中method请求方法有“OPTIONS” “GET” “HEAD” “POST” “PUT” “DELETE” “TRACE” “CONNECT”其使用与HTML中的请求是一致的。

每个wx.request都是一个请求任务，可以通过其API“requestTask.abort()”将其取消。

// 获取请求任务
const requestTask = wx.request({
})
// 取消请求任务
requestTask.abort()

文件的上传、下载

文件的上传、下载与网络请求类似，都是客户端向服务器发送请求，服务器响应数据，不同的是文件一般数据较大，网络请求一般数据较小。微信团队针对文件的上传、下载也提供了专门的API来方便调用。

文件下载的API：wx.downloadFile，代码如下：

        // 下载请求任务
        wx.downloadFile({
          url: '下载请求文件的地址',
          header: '请求的头部设置，可以不设置',
          filePath: '文件下载后存储的路径',
          success: funcation(){
            // 文件下载成功
          },
          fail: funcation(){
            // 文件下载失败
          },
          complete: funcation(){
            // 不管成功失败都会执行
          }
        })

监听下载进度的代码如下：

// 获取下载请求任务
const downloadtTask = wx. downloadFile ({
})
// 监听下载请求任务
downloadtTask.onProgressUpdate(funcation(res){
  res.progress                         // 下载的进度百分比
  res.totalBytesWritten              // 已经下载的数据长度
  res.totalBytesExpectedToWrite    // 需要下载的数据总长度
})

取消下载的代码如下：

// 获取下载请求任务
const downloadtTask = wx. downloadFile ({
})
// 取消下载请求任务
downloadtTask.abort()

文件上传的API：wx.uploadFile，代码如下：

    // 上传请求任务
    wx.uploadFile({
      url: '上传请求文件的地址',
      header: '请求的头部设置，可以不设置',
      filePath: '上传文件的路径',
      name: '文件的名称',
      formData: '额外的form data',
      success: funcation(){
        // 文件上传成功
      },
      fail: funcation(){
        // 文件上传失败
      },
      complete: funcation(){
        // 不管成功失败都会执行
      }
    })

监听上传进度的代码如下：

// 获取上传请求任务
const uploadFile = wx.uploadFile ({
})
// 监听上传请求任务
uploadFile.onProgressUpdate(funcation(res){
  res.progress                         // 上传进度的百分比
  res.totalBytesSent                  // 已经上传的数据长度
  res.totalBytesExpectedToSent     // 需要上传的数据总长度
})

取消上传的代码如下：

// 获取上传请求任务
const uploadFile = wx.uploadFile ({
})
// 取消上传请求任务
uploadFile.abort()

酷客网相关文章：

• 微信小程序页面导航
• 微信小程序API
• 微信小程序画布组件canvas
• 微信小程序video视频组件