fetch使用ajax替代方案

fetch 简介

Fetch 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的，Fetch 提供了一个更好的替代方法

Fetch API 是基于 Promise 设计，使用了 Promises 来处理结果 / 回调。旧浏览器不支持 Promise，需要使用 polyfill es6-promise。

简单实现

    fetch("http://192.168.43.169:8099/someInfo",{method: 'post',})
    .then(res=>{console.log(response)     // 包含响应结果的 promise，只是一个 HTTP 响应，而不是真的 JSON
        return response.json();})
    .then(res=>{console.log(res)     //js 格式的 json 对象
    })

async await 实现更方便

    const fetchRequest = async () => {
        let response = await fetch("http://192.168.43.169:8099/teacher/resume", {method: 'post',})
        let data = await response.json()
        console.log(data);    //js 格式的 json 对象
    }
    fetchRequest()

Response 对象

属性：

• status：整数 (默认值为 200) 为 response 的状态码
• statusText：字符串 (默认值为 ”OK”), 该值与 HTTP 状态码消息对应.
• ok：如上所示, 该属性是来检查 response 的状态是否在 200-299(包括 200,299) 这个范围内. 该属性返回一个 Boolean 值.

方法：处理包含返回结果的 promise 对象的数据

 例如  response.json()

处理包含 json 结果的 promise 对象

• clone() – 创建一个新的 Response 克隆对象.
• error() – 返回一个新的, 与网络错误相关的 Response 对象.
• redirect() – 重定向, 使用新的 URL 创建新的 response 对象..
• arrayBuffer() – Returns a promise that resolves with an + ArrayBuffer.
• blob() – 返回一个 promise, resolves 是一个 Blob.
• formData() – 返回一个 promise, resolves 是一个 FormData 对象.
• json() – 返回一个 promise, resolves 是一个 JSON 对象.
• text() – 返回一个 promise, resolves 是一个 USVString (text).

Request 对象

创建 request 对象

    request = new Request()

属性：

• method：支持 GET, POST, PUT, DELETE, HEAD
• url：请求的 URL
• headers：对应的 Headers 对象
• referrer：请求的 referrer 信息
• mode：可以设置 cors, no-cors, same-origin
• credentials：设置 cookies 是否随请求一起发送。可以设置: omit, same-origin
• redirect：follow, error, manual
• integrity：subresource 完整性值 (integrity value)
• cache：设置 cache 模式 (default, reload, no-cache)

    let request = new Request("http://192.168.43.169:8099/teacher/resume",{
        method: 'post',
        headers: new Headers({'Content-Type': 'text/plain'})
    })
    
    fetch(request)
    .then(res=>{console.log(res);
        return res.json();})
    .then(res=>{console.log(res)
    })

header

创建 header 对象

    let headers = new Headers();

headers 方法：

• Headers.append()：给现有的 header 添加一个值, 或者添加一个未存在的 header 并赋值.
• Headers.delete()：从 Headers 对象中删除指定 header.
• Headers.entries()：以 迭代器 的形式返回 Headers 对象中所有的键值对.
• Headers.get()：以 ByteString 的形式从 Headers 对象中返回指定 header 的全部值.
• Headers.has()：以布尔值的形式从 Headers 对象中返回是否存在指定的 header.
• Headers.keys()：以迭代器的形式返回 Headers 对象中所有存在的 header 名.
• Headers.set()：替换现有的 header 的值, 或者添加一个未存在的 header 并赋值.
• Headers.values()：以迭代器的形式返回 Headers 对象中所有存在的 header 的值.
• Headers.getAll()：用于返回具有给定名称的 Headers 对象中所有值的数组; 这个方法现在已经从规范中删除了，Headers.get() 方法现在返回所有的值而不是一个。

设置 header 通过属性或者方法都可以

属性形式：传一个多维数组或者对象字面量

    Header = new Headers({
      "Content-Type": "text/plain",
      "Content-Length": content.length.toString(),
      "X-Custom-Header": "ProcessThisImmediately",
    });

方法形式：

    var Header = new Headers();
    Header.append("Content-Type", "text/plain");
    Header.append("Content-Length", content.length.toString());
    Header.append("X-Custom-Header", "ProcessThisImmediately");

fetch 坑

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（但是会将 resolve 的返回值的 ok 属性设置为 false），仅当网络故障时或请求被阻止时，才会标记为 reject。
• Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})
• 不能中断，没有 abort、terminate、onTimeout 或 cancel 方法 Fetch 和 Promise 一样，一旦发起，不能中断，也不会超时，只能等待被 resolve 或 reject。