浏览器中的JS-fetch使用(二)请求参数这是我参与11月更文挑战的第14天, 活动详情查看：2021最后一次更文挑战

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

前言

前几篇文章, 我们学习记录了浏览器中的 JavaScript , 另有更文其他各知识点小结的相关阅读: list:

上文入门学习了 fetch 网络请求方法, 本文继续来学习 fetch() 网络请求方法相关细节

浏览器中的 JS-fetch 方法

fetch() 使得我们书写一个发送基本的 Get请求的代码变得简单: 可以发送 HTTP 和 HTTPS 请求,

对比 XMLHttpRequest VS fetch(url)

记得在封装 ajax 时用的的 XMLHttpRequest 吗? 如下:

let ajax = null
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest()
}
// ...

而 fetch 发起一个 get 请求只需简单的 fetch(url)即可, 下面继续学习 fetch 要注意的一些相关事项

fetch('yourUrl').then((res) => console.log(res))

fetch() 请求参数

上面最简单的 fetch 请求接收第一个参数为请求地址, 网络请求还是有点复杂的, fetch 另外还接收其他参数

第二个可选参数: 一个可以控制不同配置的 init 对象：

// Example POST method implementation:

postData('http://example.com/answer', { answer: 42 })
  .then((data) => console.log(data)) // JSON from `response.json()` call
  .catch((error) => console.error(error))

function postData(url, data) {
  // 默认项为 *
  return fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json',
    },
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  }).then((response) => response.json()) // parses response to JSON
}

fetch() 强大功能

发送带凭据的请求

为了让浏览器发送包含凭据的请求（即使是跨域源），要将 credentials: 'include' 添加到传递给 fetch()方法的 init 对象。

fetch('https://example.com', {
  credentials: 'include', // 包含凭据
})

通过 POST 上传 JSON 数据
通过 <input type="file"/> 上传文件
通过<input type="file" mutiple/> 元素，FormData() 和 fetch() 上传文件。
自定义请求对象

Calm Down & Carry On!

Buy Less by Know More! 加油!

学习, 记录, 积累是一个漫长的过程!

参考内容

Using-fetch | MDN

浏览器中的JS-fetch使用(二)请求参数

前言