微信小程序开发基础篇（四）之请求、上传、下载

针对前几篇的基本的了解，然后我们首先要先学习和了解它的基本语法，我主要从API官网上学习，然后总结在这篇博客中。供自己后期查看。以备不时之需。因为自己也是初学者，很多的都是按照API来学习讲解。

按照API的顺序，我先学习网络的模块

一、请求：wx.request(OBJECT)

wx.request发起的是 HTTPS 请求。

OBJECT参数说明：

参数名	类型	必填	说明
url	String	是	开发者服务器接口地址
data	Object、String	否	请求的参数
header	Object	否	设置请求的 header , header 中不能设置 Referer
method	String	否	默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	默认为 json。如果设置了 dataType 为 json，则会尝试对响应的数据做一次 JSON.parse
success	Function	否	收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

从上边实例代码我们可以看到，（）内有多个参数的时候，我们要用{ }括起来，然后每个用逗号分开，可以看到我们使用的属性方法，每个属性的后面使用冒号，然后再加{ }，success后面是一个函数，我们可以从代码中 可以看到一旦请求data成功，就会在控制台答打印出data的数据。

Bug & Tip

1. tip: content-type 默认为 'application/json'
2. bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常；
3. tip: 客户端的 HTTPS TLS 版本为1.2，但 Android 的部分机型还未支持 TLS 1.2，所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本；
4. tip: 要注意 method 的 value 必须为大写（例如：GET）；
5. tip: url 中不能有端口；
6. tip: request 的默认超时时间和最大超时时间都是 60s
7. tip: request 的最大并发数是 5
8. tip: 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。

二、上传

wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data 。

OBJECT参数说明：

参数	类型	必填	说明
url	String	是	开发者服务器 url
filePath	String	是	要上传文件资源的路径
name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header	Object	否	HTTP 请求 Header , header 中不能设置 Referer
formData	Object	否	HTTP 请求中其他额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明
data	String	开发者服务器返回的数据
statusCode	Number	HTTP状态码

示例代码：

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

根据以上的API开发文档，我们很容易的理解上面的一段代码，上面的代码，主要是通过chooseImage的接口，将本地的图片，上传到指定的服务器路径。就做了这么一个事。

三、下载

wx.downloadFile(OBJECT)

下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

OBJECT参数说明：

参数	类型	必填	必填
url	String	是	下载资源的 url
header	Object	否	HTTP 请求 Header
success	Function	否	下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

示例代码:

wx.downloadFile({
  url: 'http://example.com/audio/123', //仅为示例，并非真实的资源
  success: function(res) {
    wx.playVoice({
      filePath: res.tempFilePath
    })
  }
})

Bug & Tip

1. tip: 最大并发限制是 10 个
2. tip: 默认超时时间和最大超时时间都是 60s
3. tip: 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。
4. tip: 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效