# 一、Fetch

# 1、简介

  Fetch 其实就是官方提供的一个对标 XMLHttpRequest 对象的一个封装版的 ajax,使用 Fetch 的话,我们就不用像 XMLHttpRequest 使用那样混乱的配置和调用。

当然,使用 Fetch 的方式和前面我们使用 XHR 封装的 ajax 使用上基本相似。

# 2、兼容性处理

http://github.com/camsong/fetch-ie8

# 二、Fetch 使用

  fetch 是一种 HTTP 数据请求的方式,是 XMLHttpRequest 的一种替代方案。

# 1、使用模板:

fetch(url[, options])
  // json格式化
  .then((res) => res.json())
  .then((res) =>
    // handle response
  )
  .catch((error) => {
    // handle error
  })
模板解析
fetch(url[, options]).then((res) => {
  if(res.code === 200){
    return res.json()
  }else {
    return Promise.reject(res.msg)
  }
})

# 2、数据响应格式

  • response.json()
  • response.text()
  • response.formData()
  • response.blob()
  • response.arrayBuffer()

当我们在发送带有请求的 body 时,需要对数据进行字符串化;而在 axios 中,它是自动完成的

# 3、get/post 请求示例

① get 请求

<body>
  <script>
    fetch('http://jsonplaceholder.typicode.com/posts?id=1')
      // json格式化
      .then((res) => res.json())
      .then((res) => {
        //输出响应数据
        console.log(res)
      })
  </script>
</body>

② post 请求

<script>
  fetch('http://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    // 字符串化
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    })
    // 或者
    // headers: {
    //   'Content-Type': 'application/x-www-form-urlencoded'
    // },
    // body: "title=foo&body=body&userId=1"
  })
    // json格式化
    .then((response) => response.json())
    .then((res) => {
      console.log(res)
    })
    .catch((error) => console.log(error))
</script>
更新于 : 7/8/2024, 10:21:14 AM