区别
- XHR 基于事件机制实现请求成功与失败的回调，
不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱。 Fetch 通过 Promise 来实现回调，调用更加友好 - XHR 可以监控读取进度和中断请求，而 Fetch 请求不可以
请求示例
XHR
const xhr = new XMLHttpRequest() // 创建 xhr 操作对象 readyState = 0
xhr.open('get', 'http://jsonplaceholder.typicode.com/posts/2') // 建立请求 readyState = 1
xhr.setRequestHeader('name', '123')
xhr.send( /** 请求体可以放这里 */ ) // 发送请求 readyState = 2
xhr.onreadystatechange = () => { // readyState = 3 说明正在接收服务器传来的 body 部分的数据
if (xhr.readyState === 4 && xhr.status === 200) { // readyState = 4 说明数据完全接收
console.log(xhr.response);
}
}
xhr.onprogress = (p) => {
if (p.lengthComputable) { // 表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算
console.log(p.total); // 表示正在执行的底层流程的工作总量
console.log(p.loaded); // 表示底层流程已经执行的工作总量
}
}
Fetch
fetch('http://jsonplaceholder.typicode.com/posts', {
//请求方法
method: 'POST',
//请求头
headers: {
name: 'zhang'
},
//请求体
body: JSON.stringify({
id: 1
})
}).then(response => {
return response.json();
}).then(response => {
console.log(response);
});
tips：
- 接收到一个代表错误的 HTTP 状态码(404 或 500)时，从 fetch()返回的 Promise 不会被标记为 reject，相反标记了 resolve（但ok 属性设置为 false）。仅当网络故障时或请求被阻止时，才会标记为 reject。
- 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 若要发送 cookies，必须设置 credentials 属性。
