我们去聊前端开发,就绕不过网络请求,可以说网络请求支撑起来了前端的半边天,因为有网络数据的交互,才使得我们的网页变得更加“灵活”起来了,让我们的网站能及时反馈数据给用户。本篇文章主要介绍在前端开发中,我们常用的几种网络请求方式,首先来了解下常用的网络请求方式有哪几种:
ajax
请求axios
请求fetch
请求xhr
原生请求websocket
请求
Ajax请求
ajax
是由Jquery
库提供的一种网络异步请求方法,通过ajax我们可以快速获取后端请求数据,并将其包装输出到页面元素上。请原理实现还是通过xhr
封装请求服务器,通过服务器返回数据进行DOM
渲染,我找到一个比较能描述的流程图像。
基础使用
# 格式
$.ajax({name:value, name:value, ... }) // 可以直接传入url
# 使用示例
$.ajax({
url:"http://api.mediastack.cn/base/captcha",
dataType:"json",
error:function(error){
console.log("get catch error:",error)
},
success:function(result){
// 后台成功返回
console.log("get result:",result)
}
});
ajax请求的字典值支持如下:
- url:字符串,请求的
url
。 - async:布尔值,表示请求是否异步处理。默认是
true
。 - beforeSend(xhr):发送请求前回调函数。
- data:发送到服务器的数据。将自动转换为请求字符串格式。
GET
请求中将附加在URL
后面。 - dataType:字符串类型, 预期服务器返回的数据类型。如:
- xml:返回
XML
文档 - html:返回纯文本
HTML
信息 - script:把响应的结果当作
JavaScript
执行。 - json:把响应的结果当作
JSON
执行,并返回一个JavaScript
对象。 - jsonp: 以
JSONP
的方式载入JSON
数据块。会自动在所请求的URL
最后添加 “?callback=?
“。 - text:返回纯文本字符串。
- xml:返回
- context:这个对象用于设置Ajax相关回调函数的上下文。
- converters :一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数,返回经转换后的请求结果。默认为
{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
- crossDomain:如果你想在同一域中强制跨域请求(如
JSONP
形式),例如,想服务器端重定向到另一个域,那么需要将crossDomain
设置为true
。默认同域请求为false
, 跨域请求为true
。 - contentType:发送信息至服务器时内容编码类型。默认值是”
application/x-www-form-urlencoded; charset=UTF-8
“,适合大多数情况。 - complete:请求完成后回调函数 (请求
success
和error
之后均调用)。这个回调函数得到2个参数: jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串("success"
,"notmodified"
,"error"
,"timeout"
,"abort"
, 或者"parsererror"
) 。 - cache:布尔类型,默认为true.如果设置为 false ,浏览器将不缓存此页面。
- accepts:内容类型发送请求头(
Content-Type
),用于通知服务器该请求需要接收何种类型的返回结果。 - error:函数类型,请求失败时调用此函数。有以下三个参数:jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和 捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到
null
之外,还可能是"timeout"
,"error"
,"abort"
,和"parsererror"
。 当一个HTTP错误发生时,errorThrown
接收HTTP状态的文本部分,比如: “Not Found”(没有找到) 或者 “Internal Server Error.”(服务器内部错误)。 - jsonp:字符串类型,在一个
jsonp
请求中重写回调函数的名字。这个值用来替代在”callback=?
“这种GET
或POST
请求中URL
参数里的”callback
“部分,比如{jsonp:'onJsonPLoad'}
会导致将”onJsonPLoad=?"传给服
务器。 - jsonpCallback:为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
- mimeType:一个mime类型用来覆盖XHR的 MIME类型。
- success:请求成功后的回调函数。这个函数传递3个参数:从服务器返回的数据,并根据
dataType
参数进行处理后的数据,一个描述状态的字符串;还有jqXHR
(在jQuery 1.4.x
前为XMLHttpRequest
) 对象 。 - timeout:设置请求超时时间(毫秒)。此设置将覆盖
$.ajaxSetup()
里的全局设置。 - type:请求方式 (“
POST
” 或 “GET
“), 默认为 “GET
“。
Axio请求
Axio
是一个基于Promise
的网络请求库,同时适配于浏览器端和服务端(nodejs
)。在服务端它使用原生 node.js
http
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests
。
安装
$ npm install axios # 或者使用yarn
$ yarn add axios
通过CDN加载:
<!--jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!--unpkg CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
示例
axios.request({
url:'/article/home/index',
method:'get',
baseURL:'http://test.mediastack.cn/'
}).then(
res => {
console.log("get res:",res);
var str=JSON.stringify(res);
document.getElementById("content").innerHTML = str;
},error => {
console.log("get request failed:",error);
document.getElementById("content").innerHTML = error;
}
);
具体使用方式,可参考React应用中封装axios。
fetch
请求
fetch API
提供了一个标准的js
接口,优化http
请求和响应的操作方式,fetch
提供了一种极简单的方式来进行异步跨域获取资源,和axios类似的是其依托Promise
,通过返回Promise
对象实现了请求的异步。如下为fetch
常见使用示例:
var url = "https://mock.yonyoucloud.com/mock/16388/test/cities";
fetch(url, {
method: "GET",
mode: 'cors',
cache: 'default'
}).then(function(response){
return response.json(); //响应内容json化
}).then(function(res){
console.log(res); //打印响应值
})
如上,配置参数支持如下:
method
: 请求方法,如GET、POST、PUT、DELETE
。默认GET
。headers
: 请求头信息,形式为Headers
的对象或包含ByteString
值的对象字面量。比如:headers : { 'Content-Type' : 'application/json' }
,可以设置所有的header
信息。body
: 请求的body
信息:可能是一个Blob、BufferSource、FormData、URLSearchParams
或者USVString
对象。注意GET
或HEAD
方法的请求不能包含body
信息。mode
: 请求的模式,如 默认cors
跨域、 no-cors不跨域 或者same-origin
。credentials
: 请求的credentials
,如 默认omit
不携带cookie
、same-origin
同源携带cookie
或者include
跨域携带cookie
。但在Chrome
中,Chrome 47
之前的版本默认值为same-origin
,自Chrome 47
起,默认值为include
。cache
: 请求的cache
模式:default、 no-store不缓存、 reload 、 no-cache
有缓存但仍需要去服务器获取资源 、force-cache
或者only-if-cached
。redirect
: 可用的redirect
模式:follow
(自动重定向),error
(如果产生重定向将自动终止并且抛出一个错误), 或者manual
(手动处理重定向). 在Chrome
中默认使用follow
(Chrome 47
之前的默认值是manual
)。referrer
: 一个USVString
可以是no-referrer
、client或一个 URL。默认是client
。referrerPolicy
: 指定了HTTP
头部referer
字段的值。可能为以下值之一:no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
XHR原生请求
xhr
请求是浏览器端网络请求的基础,我们现在常用的所有网络请求框架都是基于xhr
实现的二度封装,接下来,我们来了解下不用网络框架如何使用xhr
实现前端的网络请求。代码示例如下:
// 创建 XHR 对象
const xhr = new XMLHttpRequest();
// 监听 onreadystatechange 事件
xhr.onreadystatechange = () => {
if (xhr.status == 200 && xhr.readyState == 4) {
console.log('请求成功', xhr.responseText);
}
};
// 调用 open 函数
xhr.open('POST', 'http://localhost:8080/login', true);
// post 请求时,设置请求头 Content-Type
// 用于指定请求参数,以什么样的格式发送给后端,告诉服务器,我前端发送的请求参数是什么类型的。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 调用 send 函数
xhr.send('a=100&b=200');
如上,通过onreadystatechange
监听的回调函数获取返回数据。
websocket请求
websocket
网络请求与上述其他网络请求方式不同,上述其他请求基本都是基于http
协议实现的单次请求,而websocket
是通过socket
实现的前后端的长连接网络请求,一般适用于实时性要求高的功能需求,如我们常见的在线聊天室、实时推送等。
let ws = new WebSocket(url)
ws.onopen = function () { // 指定连接成功后的回调函数 } ws.onclose = function () { // 指定连接关闭后的回调函数 } ws.onmessage = function () { // 指定收到服务器数据后的回调函数 } ws.onerror = function () { // 指定报错时的回调函数 } ws.send(message) 向服务器发送数据 ws.close() 关闭当前连接
有关websocket
更加详细的介绍可参考:前端开发之websocket