XmlHttpRequest之fetch
宿淳
XmlHttpRequest对象的理解
XMLHttpRequest对象是基于XML的HTTP请求,是一个浏览器接口,用于与服务器交互，我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据，并且虽然名字叫XMLHttpRequest，但实际上可以用于获取任何类型的数据。
XMLHttpRequest对象使用方式
- 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- 建立http连接
xhr.open('GET', '/login');
- 发送请求
xhr.send()
- 获取返回数据
//就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert( xhr.statusText );
}
};
readystate
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT | XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法 |
| 1 | OPENED | open() 方法已经被调用 |
| 2 | HEADERS_RECEIVED | send() 方法已经被调用，响应头也已经被接收 |
| 3 | LOADING | 响应体部分正在被接收 |
| 4 | DONE | 请求操作已经完成。这意味着数据传输已经彻底完成或失败 |
- 终止请求
XMLHttpRequest.abort()
//当一个请求被终止，它的 readyState 将被置为0,并且请求的 status 置为 0。
fetch
概述
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 的请求和响应，它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
特点
- 基于标准 Promise 实现，支持 async / await
- 脱离了 XHR，是 ES 规范中新的实现方式。
- 语法简洁，更加语义化
问题
-
fetch 不支持 abort （xhr 有个 xhr.abort 方法能够直接阻断请求）
-
fetch 没有办法原生监测请求的进度，而 XHR 能够。
-
fetch 兼容性并不太好，IE 不支持
注意
- fetch 只对网络请求报错，对400,500都看成成功的请求，服务器返回400， 500 错误码时并不会 reject，只有网络错误这些致使请求不能完成时， fetch 才会被 reject。须要封装去处理。
- fetch 默认不会带 cookie，须要添加配置项： fetch(url, {credentials: ‘include’})
fetch使用
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="myform">
<input type="text" placeholder="community" id="community">
<input type="text" placeholder="parkingLotId" id="parkingLotId">
<input type="text" placeholder="name" id="name">
<input type="text" placeholder="status" id="status">
<button>添加</button>
</form>
</body>
<script>
let form = document.querySelector('#myform')
form.onsubmit = async function (e) {
e.preventDefault();//阻止事件的默认行为
//获取每个输入框的值
let community = document.querySelector('#community').value
let parkingLotId = document.querySelector('#parkingLotId').value
let name = document.querySelector('#name').value
let status = document.querySelector('#status').value
let obj = { community, parkingLotId, name, status }
//发起请求
let result = await fetch('/parking-lot/add', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(obj)
});
let data = await result.json();
if (data.status == 201) {
alert('添加成功')
}
}
</script>
</html>
类似资料：