网络请求
当在浏览器的地址栏输入我们的项目网址,点击回车后,浏览器就会发送网络请求,经过一系列操作后,浏览器会出项目的。那这个网络请求过程中间经历了什么呢?这一小节我们就来详细剖析一下。
本小节我们将学习:网络请求的过程是怎样经历的、 发起网络请求的应用实例、网络请求返回数据的处理。
网络请求实例的最好在实际项目中去应用实践,网络请求在实际开发中很容易出现问题。比如有时明明请求发送成功了,却没有返回想要的数据,这些都需要我们在项目开发过程中多多练习积累经验。
在我们从发送网络情况到网页的这个过程中,系统主要进行了下面几步操作:
(1)进行域名解析:系统会根据域名找到服务器的IP地址;
(2)建立TCP连接:确保数据可以有效的传输;
(3)客户端发起 HTTP 请求:TCP建立连接后,客户端才会正式发起 HTTP 请求,带着请求数据发给服务器;
(4)服务器响应HTTP请求:服务器会接收并处理上一步从客户端发过来的数据,不管是否处理成功,都会返回响应消息给客户端, HTML 或者其他格式的数据,还有响应状态码等,响应状态码是判断我们是否请求成功最直观的数据,我们最常见的有200 OK请求成功、 Not Found 请求失败。
(5)浏览器解析 HTML :浏览器拿到html后,就会开始解析并渲染其中的,将相应的给。
框架给我们提供了丰富的 API,我们可以直接来进行网络请求。最常用到的是 uni.request
,这一小节我们来看看 uni.request
的 API 参数。
大家要注意区分网络请求与路由,网络请求是请求项目外部的地址,而路由是到项目内部的。
在日常开发中,我们经常用到的是 get 和 post 网络请求,在 中都是 uni.request
API实现的,下面我们来演示一下。
Tips:
上面列出的参数有很多,但是大多数我们实际开发项目用不到,经常用到的大多是 url、data、method、success 这几个参数。
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
//示例地址,非真实地址
url: @H_785_@'http://localhost:8080/api/getData',
//必须为大写,认值为GET,GET请求可以不写此参数
method:@H_785_@'GET',
data:{
openId:@H_785_@"4a96efrtgyt56Q89jiyth"
},
success(res) {
console.log(res)
}
})
}
}
}
</script>
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: @H_785_@'请求地址',
header: {
//data 会 JSON 序列化
@H_785_@'Content-Type': @H_785_@'application/json;charset=UTF-8',
//data 会被转为 query string
@H_785_@'Content-Type': @H_785_@'application/x-www-form-urlencoded',
},
data:{
openId:@H_785_@"4a96efrtgyt56Q89jiyth"
},
success(res) {
console.log(@H_785_@'服务器返回的信息:',res)
}
})
上面我们在 success 参数中打印了返回的数据。
success(res) {
console.log(@H_785_@'服务器返回的信息:',res)
}
打印信息格式如下:
{
@H_785_@"data":@H_785_@"{"id@H_785_@":1,"name@H_785_@": "imooc@H_785_@"}",
@H_785_@"header": {
@H_785_@"Server": @H_785_@"/1.14.0",
@H_785_@"Date": @H_785_@"Thu, 10 Apr 2020 03:08:20 GMT",
@H_785_@"Content-Type": @H_785_@"application/json;charset=utf-8;",
@H_785_@"@R_693_@": @H_785_@"chunked",
@H_785_@"Connection": @H_785_@"keep-alive"
},
@H_785_@"statusCode": ,
@H_785_@"cookies": [],
@H_785_@"errMsg": @H_785_@"request:ok"
}
statusCode 为 200,说明请求成功了,后面我们再处理从服务器传回来的 data 信息就可以了。
本节课程我们主要学习了 的网络请求,直接 uni.request
这个 API 就可以实现我们经常用到的 get、post 请求。本节课程的重点如下: