fetch的使用及和ajax的区别

fetch的使用

fetch是一种原生 js 对 HTTP 数据请求的方式，是 XMLHttpRequest 的一种更理想的替代方案 Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应，它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源

fetch()方法

`fetch()`方法的两个参数：

url：必须参数，请求的 URL
init：可选参数，请求的配置对象，配置包括：

follow：Chrome 47之前的默认值，自动重定向
error：如果产生重定向将自动终止并且抛出一个错误
manual：Chrome 47开始的默认值，手动处理重定向
omit：默认值，不携带cookie
same-origin：同源请求下携带cookie
include：同源和跨域请求下都携带cookie
cors：默认值，允许跨域请求，遵守 CORS 协议
no-cors：允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，前提条件是请求的 method 只能是 HEAD、GET 或 POST，而且 js 不能访问 Response 对象中的任何属性
same-origin：不允许跨域请求
method：请求使用的方法，如 GET、POST、PUT,、DELETE、HEAD
headers：请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量
body：请求的参数，可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象，注意 GET 或 HEAD 方法的请求不能包含 body 信息
mode：请求是否允许跨域
credentials：请求是否携带cookie
cache：请求的缓存模式，可能为以下值之一：default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached
redirect：请求的重定向方式
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 浏览器都不支持