网络请求

1. 前言

当用户在浏览器的地址栏输入我们的项目网址，点击回车后，浏览器就会发送网络请求，经过一系列操作后，浏览器会显示出项目的页面。那这个网络请求过程中间经历了什么呢？这一小节我们就来详细剖析一下。

本小节我们将学习：网络请求的过程是怎样经历的、uniapp 发起网络请求的应用实例、网络请求返回数据的处理。

网络请求实例的内容最好在实际项目中去应用实践，网络请求在实际开发中很容易出现问题。比如有时明明请求发送成功了，却没有返回想要的页面数据，这些都需要我们在项目开发过程中多多练习积累经验。

2. 网络请求过程

在我们从发送网络情况到显示网页的这个过程中，系统主要进行了下面几步操作：
（1）进行域名解析：系统会根据域名找到服务器的IP地址；
（2）建立TCP连接：确保数据可以有效的传输；
（3）客户端发起 HTTP 请求：TCP建立连接后，客户端才会正式发起 HTTP 请求，带着请求数据发给服务器；
（4）服务器响应HTTP请求：服务器会接收并处理上一步从客户端发过来的数据，不管是否处理成功，都会返回一个响应消息给客户端，包括 HTML 文件或者其他格式的数据，还有响应状态码等，响应状态码是判断我们是否请求成功最直观的数据，我们最常见的有200 OK请求成功、404 Not Found 请求失败。
（5）浏览器解析 HTML 文件：浏览器拿到html文件后，就会开始解析并渲染其中的html代码，将相应的页面显示给用户。

3. uni.request API参数

uni-app 框架给我们提供了丰富的 API，我们可以直接调用来进行网络请求。最常用到的是 uni.request 方法，这一小节我们来看看 uni.request 的 API 参数。

大家要注意区分网络请求与路由跳转，网络请求是请求项目外部的地址，而路由跳转是跳转到项目内部的页面。

在日常开发中，我们经常用到的是 get 和 post 网络请求，在 uni-app 中都是调用 uni.request API实现的，下面我们来演示一下。

参数名	类型	默认值	说明
url	String		要请求的服务器地址、域名
data	Object/String/ArrayBuffer		请求时要传递的参数
header	Object		请求的 header，header 中不能设置 Referer
method	String	GET	有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT（必须为大写）
timeout	Number	30000	超时时间，单位 ms
dataType	String	json	如果值为 json，会尝试对返回的数据做一次 JSON.parse
responseType	String	text	设置响应的数据类型。合法值：text、arraybuffer
success	Function		请求服务器成功返回的回调数据
fail	Function		请求服务器失败返回的回调数据
complete	Function		请求服务器成功、失败都会返回回调数据

Tips：

上面的列出的参数只有 url 是必填项，其他都是选填项。
在小程序中网络相关的 API 在使用前需要配置域名白名单。

4. 发送网络请求

上面列出的参数有很多，但是大多数我们实际开发项目用不到，经常用到的大多是 url、data、method、success 这几个参数。

4.1 实例

<template>
    <view>
        <button @click="sendGet">发送请求</button>
    </view>
</template>

<script>
	export default {
	    methods: {
	        sendGet () {
	            uni.request({
					//示例地址，非真实地址
	                url: 'http://localhost:8080/api/getData',
					//必须为大写，默认值为GET，GET请求可以不写此参数
					method:'GET',
					data:{
					   openId:"4a96efrtgyt56Q89jiyth"
					},
	                success(res) {
	                  console.log(res)
	                }
	            })
	        }
	    }
	}
</script>
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4.2 data 参数说明

data参数是支持对象 Object、字符串 String 类型的，但不管我们传入什么类型，最终都会被转换成 String 类型。转换规则如下：

get 方法：如果 data 参数是 { name: '71ai', age: 18 } ，转换后的结果是 name=71ai&age=18。

post 方法：如果 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
如果 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。
实例：

uni.request({
	url: '请求地址',
	header: {
		//data 会 JSON 序列化
	    'Content-Type': 'application/json;charset=UTF-8',
		//data 会被转为 query string
	    'Content-Type': 'application/x-www-form-urlencoded',
	},
	data:{
	   openId:"4a96efrtgyt56Q89jiyth"
	},
    success(res) {
      console.log('服务器返回的信息：',res)
    }
})
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.3 success 返回参数说明

参数	类型	说明
data	Object/String/ArrayBuffer	服务器返回的数据
statusCode	Number	服务器返回的 HTTP 状态码
header	Object	服务器返回的 HTTP Response Header
cookies	Array.	服务器返回的 cookies，格式为字符串数组

上面我们在 success 参数中打印了返回的数据。

success(res) {
  console.log('服务器返回的信息：',res)
}
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3

打印信息格式如下：

{
  "data":"{"id":1,"name": "71ai"}",
  "header": {
    "Server": "nginx/1.14.0",
    "Date": "Thu, 10 Apr 2020 03:08:20 GMT",
    "Content-Type": "application/json;charset=utf-8;",
    "Transfer-Encoding": "chunked",
    "Connection": "keep-alive"
  },
  "statusCode": 200,
  "cookies": [],
  "errMsg": "request:ok"
}
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13