网络请求

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>

4.2 data 参数说明

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

get 方法:如果 data 参数是 { name: 'imooc', age: 18 } ,转换后的结果是 name=imooc&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)
    }
})

4.3 success 返回参数说明

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

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

success(res) {
  console.log('服务器返回的信息:',res)
}

打印信息格式如下:

{
  "data":"{"id":1,"name": "imooc"}",
  "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"
}

statusCode 为 200,说明请求成功了,后面我们再处理从服务器传回来的 data 信息就可以了。

5. 小结

本节课程我们主要学习了 uni-app 的网络请求,直接调用 uni.request 这个 API 就可以实现我们经常用到的 get、post 请求。本节课程的重点如下:

  • 掌握怎样发送 get 请求,经常用到的几个参数要熟练;
  • data 参数类型在 get 方法、post 方法请求情况下的不同转换;
  • success 返回参数的格式,以及每个参数代表的含义。