Fetch和Fetch API

认识Fetch和Fetch API

◼ Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

  比如返回值是一个Promise，提供了一种更加优雅的处理结果方式
    ✓ 在请求发送成功时，调用resolve回调then；
    ✓ 在请求发送失败时，调用reject回调catch；
  比如不像XMLHttpRequest一样，所有的操作都在一个对象上；

◼ fetch函数的使用：

  input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；
  init：其他初始化参数
    ✓ method: 请求使用的方法，如 GET、POST；
    ✓ headers: 请求的头信息；
    ✓ body: 请求的 body 信息；

Fetch数据的响应（Response）

◼ Fetch的数据响应主要分为两个阶段：
◼ 阶段一：当服务器返回了响应（response）
    fetch 返回的promise 就使用内建的Response class 对象来对响应头进行解析；
    在这个阶段，我们可以通过检查响应头，来检查HTTP 状态以确定请求是否成功；
    如果fetch 无法建立一个HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么promise 就会reject；
    异常的HTTP 状态，例如404 或500，不会导致出现error；
◼ 我们可以在response 的属性中看到HTTP 状态：
    status：HTTP 状态码，例如200；
    ok：布尔值，如果HTTP 状态码为200-299，则为true；
◼ 第二阶段，为了获取response body，我们需要使用一个其他的方法调用。
    response.text() —— 读取 response，并以文本形式返回 response；
    response.json() —— 将 response 解析为 JSON；

  script>
    //1.fetch发起get请求
    // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
      //1.获取到对应的response
      //2.获取具体结果
      // 1.1未优化
    //   res.json().then(res=>{
    //     console.log(res)
    //   })
    // }).catch(err=>{
    //   console.log(err)
    // })
    // 优化方式一
  //     return res.json()
  // }).then(res=>{
  //   console.log(res)
  // }).catch(err=>{
  //   console.log(err)
  // })

  // 优化方式二:
  // async function getDate() {
  //   const response = await  fetch("http://123.207.32.32:8000/home/multidata")
  //   const res = await response.json()
  //   console.log(res)
  // }
  // getDate()

  // 2.post请求有参数
  async function getDate() {
    const formData = new FormData()
    formData.append("name","hdc")
    formData.append("age",21)
    const response = await  fetch("http://123.207.32.32:1888/02_param/postform",{
      method:"post",
      body:formData
    })
    // 获取response状态
    console.log(response.ok,response.status,response.statusText)
    const res = await response.json()
    console.log(res)
  }
  getDate()
  </script>

Fetch网络请求的演练

Fetch POST请求