fetch详解

fetch

fetch 与 axios 的对比

fetch 优点：

1. 使用更方便。fetch 是浏览器原生支持的请求方法，也已直接在浏览器中使用，也可以在代码中随时使用，而不需要像 axios 一样引入第三方包
2. 脱离了浏览器的 XHR，是 ES 规范里新的实现方式
3. 是基于 promise 的异步请求

fecth 缺点：

1. fetch 携带的参数如果是 json 对象需要转换为 json 字符串，axios 可以直接传对象
2. fetch 只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理。xhr 自带请求取消、错误等方法，所以服务器返回 4xx 或 5xx 时，axios 会抛出错误，并取消请求
3. fetch 默认不会带 cookie，需要添加配置项 credentials:'include'才会携带 cookie
4. fetch 不支持 abort，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
5. fetch 没有办法原生监测请求的进度，而 XHR 可以

axios 优点：

1. 从浏览器中创建 XMLHttpRequest，基于浏览器的 xhr
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 可以拦截请求和响应
5. 可以转换请求和响应数据
6. 可以取消请求
7. 可以自动转换 JSON 数据
8. 客户端支持防止 CSRF/XSRF
9. xhr 自带请求取消、错误等方法，所以服务器返回 4xx 或 5xx 时，axios 会抛出错误，并取消请求

axios 缺点：

1. 使用时需要先安装 axios，引入 axios 并全局挂载 axios，才可以使用

fetch 使用

fetch 语法

fetch(url, options).then(
  (response) => {
    //处理http响应（只有响应成功，即使状态码是400，500，都会在这里显示）
  },
  (error) => {
    //处理错误(只有发生网络错误是会在这里报错)
  },
)

示例：

function fetchGetParams() {
  console.log('fetch-test-get-params')
  const url = 'http://127.0.0.1:8080/get/list?name=zs&age=10'
  const options = {
    method: 'GET',
  }
  fetch(url, options)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((e) => console.log('error', e))
}
function fetchPostParams1() {
  console.log('fetch-test-post-params')
  const url = 'http://127.0.0.1:8080/post/list'
  const params = {
    name: 'postName',
    age: 100,
  }
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(params),
  }
  fetch(url, options)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((e) => console.log('error', e))
}

请求参数

url ：是发送网络请求的地址
options：发送请求参数,
    body : http请求参数
    mode : 指定请求模式。
        cros:允许跨域（为默认值）
        same-origin:只允许同源请求;
        no-cros:只限于get、post和head,并且只能使用有限的几个简单标头。
    cache : 用户指定缓存。
    method : 请求方法，默认GET
    signal : 用于取消 fetch
    headers : http请求头设置
    keepalive : 用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
    credentials : cookie设置，
        omit:忽略不带cookie（默认），
        same-origin:同源请求带cookie，
        inclue:无论跨域还是同源都会带cookie。

fetch 请求成功后，响应 response 对象

• statusText - 服务器返回状态文字描述
• ok - 返回布尔值，如果状态码 2 开头的，则 true,反之 false
• status - http 状态码，范围在 100-599 之间
• headers - 响应头
• body - 响应体。响应体内的数据，根据类型各自处理。
• type - 返回请求类型。
• redirected - 返回布尔值，表示是否发生过跳转。

读取响应数据

• response 对象根据服务器返回的不同类型数据，提供了不同的读取方法。
• response.text() -- 得到文本字符串
• response.json() - 得到 json 对象
• response.blob() - 得到二进制 blob 对象
• response.formData() - 得到 fromData 表单对象
• response.arrayBuffer() - 得到二进制 arrayBuffer 对象

response.json()

response.json()会将返回的数据读取为 json 对象,并返回一个 promise
读取完成，在.then()方法中可以取到 json 形式的返回数据

fetch(url, options)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((e) => console.log('error', e))

response.body()

body 属性返回一个 ReadableStream 对象，供用户操作，可以用来分块读取内容，显示下载的进度就是其中一种应用
response.body.getReader() 返回一个遍历器 read()，这个遍历器 read() 方法每次都会返回一个对象，表示本次读取的内容块。

const response = await fetch('flower.jpg') // 请求图片
const reader = response.body.getReader() // getReader()获得响应数据
while (true) {
  const { done, value } = await reader.read() // read()遍历响应数据
  // done是一个Boolean值，表示数据是否接收完成
  // value是遍历后的数据，value.length表示数据的字节数
  if (done) {
    break
  }
  console.log(`Received ${value.length} bytes`)
}

get 请求

get 请求的参数必须拼接在请求地址后面

const url = 'http://127.0.0.1:8080/get/list?name=zs&age=10'
const options = {
  method: 'GET',
}
fetch(url, options)

post 请求

post 请求的参数放在 body 里面
需要配置 content-type，但因为 body 是字符串的缘故，浏览器默认给请求 Content-Type 的赋值是 text/plain

body: `user=${user.value}&pas=${pas.value}`

提交 json 数据时，需要把 json 转换成字符串

body: JSON.stringify(json)

提交的是表单数据，使用 formData 转化下吗，上传文件，可以包含在整个表单里一起提交

const data = new FormData()
data.append('file', input.files[0])
data.append('user', 'foo')
body: data

上传二进制数据，将 bolb 或 arrayBuffer 数据放到 body 属性里

body: blob