fetch的使用及和ajax的区别
fetch的使用
fetch是一种原生 js 对 HTTP 数据请求的方式，是 XMLHttpRequest 的一种更理想的替代方案
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应，它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源
fetch()方法
fetch()方法的两个参数：
url：必须参数，请求的 URLinit：可选参数，请求的配置对象，配置包括：- method：请求使用的方法，如 GET、POST、PUT,、DELETE、HEAD
- headers：请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量
- body：请求的参数，可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象，注意 GET 或 HEAD 方法的请求不能包含 body 信息
- mode：请求是否允许跨域
- cors：默认值，允许跨域请求，遵守 CORS 协议
- no-cors：允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，前提条件是请求的 method 只能是 HEAD、GET 或 POST，而且 js 不能访问 Response 对象中的任何属性
- same-origin：不允许跨域请求
- credentials：请求是否携带cookie
- omit：默认值，不携带cookie
- same-origin：同源请求下携带cookie
- include：同源和跨域请求下都携带cookie
- cache：请求的缓存模式，可能为以下值之一：default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached
- redirect：请求的重定向方式
- follow：Chrome 47之前的默认值，自动重定向
- error：如果产生重定向将自动终止并且抛出一个错误
- manual：Chrome 47开始的默认值，手动处理重定向
- referrer：请求的引用者，默认是 client，可以是 no-referrer、client 或一个 URL
- referrerPolicy：指定了 HTTP 头部 referer 字段的值，可能为以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url
- integrity：包括请求的 subresource integrity 值 （ 例如：sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）
fetch()请求返回一个包含响应结果的promise（resolve 时回传 Response 对象），它只是一个 HTTP 响应，而不是真的 JSON，为了获取 JSON 的内容，我们需要使用 json()方法（在 Body mixin 中定义，被 Request 和 Response 对象实现）
一个基本的 fetch 请求：
//url：必须，请求的url
//init：可选，请求的配置对象
fetch(url, init)
.then(response => {
//fetch请求返回整个Response对象，使用json()方法转换成JSON数据
response.json()
}).then(data => {
//转换后返回的JSON数据
console.log(data)
}).catch(err => {
//请求的错误处理
console.log(err)
})
Headers对象：Fetch API 的 Headers 接口的MDN文档
Request对象：Fetch API 的 Request 接口的MDN文档
Response对象：Fetch API 的 Response 接口的MDN文档
fetch的基本使用方式：
fetch 请求携带 cookie：
//可以通过设置请求配置对象得到credentials属性实现请求携带cookie
//credentials: 'include'：同源和跨域请求下都携带cookie
//credentials: 'same-origin'：同源请求下携带cookie
//credentials: 'omit'：默认值，不携带cookie
fetch('https://blog.csdn.net/weixin_45426836', {
credentials: 'include'
}).then(response => {
response.json()
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
fetch 上传 JSON 数据：
//使用fetch() POST JSON数据
let data = {
a: 1,
b: 2
}
fetch('https://blog.csdn.net/weixin_45426836', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
response.json()
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
fetch 上传文件：
//可以通过HTML <input type="file"/>元素，FormData()和fetch()上传文件
//创建一个formData对象
var formData = new FormData()
//获取input file控件
var fileField = document.querySelector("input[type='file']")
//将上传的数据添加到formData对象中
formData.append('username', 'abc')
//将上传的文件添加到formData对象中
formData.append('avatar', fileField.files[0])
fetch('https://blog.csdn.net/weixin_45426836', {
method: 'PUT',
body: formData
}).then(response => {
response.json()
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
fetch 上传多个文件：
//可以通过HTML <input type="file" mutiple/>元素，FormData()和fetch()上传文件
//创建一个formData对象
var formData = new FormData()
//获取input file控件
var photos = document.querySelector("input[type='file'][multiple]")
//将上传的数据添加到formData对象中
formData.append('title', '廊坊吴彦祖')
//formData只接受文件、Blob或字符串，不能直接传递数组，所以必须循环嵌入
//将上传的文件循环遍历添加到formData对象中
for (let i = 0; i < photos.files.length; i++) {
formData.append('photo', photos.files[i]);
}
fetch('https://blog.csdn.net/weixin_45426836', {
method: 'POST',
body: formData
}).then(response => {
response.json()
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
检查 fetch 请求是否成功：
//可以通过Response.ok是否为true来检测请求是否成功，成功做相应处理，失败抛出错误
fetch('https://blog.csdn.net/weixin_45426836')
.then(response => {
if(response.ok) {
return response.json()
}
throw new Error('请求失败')
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
自定义 fetch 请求对象：
//可以通过使用Request()构造函数来创建一个request对象，然后再作为参数传给fetch()
//Request()和fetch()接受同样的参数
//定义请求配置对象
var myInit = {
method: 'GET',
mode: 'cors',
cache: 'default'
}
//创建一个request对象
var myRequest = new Request('https://blog.csdn.net/weixin_45426836', myInit)
fetch(myRequest)
.then(response => {
response.json()
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
fetch和ajax的区别：
ajax：
- ajax 是 XMLHTTPRequest 对象的一个实例
- ajax 只有当状态为 200 或者 304 时才会请求成功
- ajax 兼容性好，几乎所有主流浏览器都支持
fetch：
- fetch 是 ES6 的规范，没有使用 XMLHttpRequest 对象
- fetch 是基于 promise 实现的，也可以结合 async/await
- fetch 请求默认不携带 cookie，需要设置 init 配置：credentials: ‘include’
- fetch 在接受到一个错误的HTTP 状态码时（即使响应的 HTTP 状态码是 404 或 500），返回的 Promise 不会被标记为 reject，相反，它会将 Promise 状态标记为 resolve，仅当网络故障时或请求被阻止时，才会标记为 reject
- fetch 兼容性不好，所有的 IE 浏览器都不支持
参考文档
MDN Fetch 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch