js fetch的简单使用

基本使用

fetch(url, optionObj)

参数选项

optionObj = {
    method: "GET",
    headers: {"Content-Type": "text/plain;charset=UTF-8"},
    body: undefined,
    referrer: "about:client",
    referrerPolicy: "no-referrer-when-downgrade",
    mode: "cors",
    credentials: "same-origin",
    cache: "default",
    redirect: "follow",
    integrity: "",
    keepalive: false,
    signal: undefined
}

参数详解

1. method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。
2. headers：一个对象，用来定制 HTTP 请求的标头。
3. body：POST 请求的数据体。
4. cache：指定如何处理缓存。可能的取值如下：
   1. tdefault：默认值，先在缓存里面寻找匹配的请求。
   2. no-store：直接请求远程服务器，并且不更新缓存。
   3. reload：直接请求远程服务器，并且更新缓存。
   4. no-cache：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存。
   5. force-cache：缓存优先，只有不存在缓存的情况下，才请求远程服务器。
   6. only-if-cached：只检查缓存，如果缓存里面不存在，将返回504错误。
5. mode: 指定请求的模式。可能的取值如下：
   1. cors：默认值，允许跨域请求。
   2. same-origin：只允许同源请求。
   3. no-cors：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求。
6. credentials：指定是否发送 Cookie。可能的取值如下：
   1. same-origin：默认值，同源请求时发送 Cookie，跨域请求时不发送。
   2. include：不管同源请求，还是跨域请求，一律发送 Cookie。
   3. omit：一律不发送。
7. signal：指定一个 AbortSignal 实例，用于取消fetch()请求
8. keepalive：用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。 一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。 这时，如果不用keepalive属性，数据可能无法发送，因为浏览器已经把页面卸载了。
9. redirect: 指定 HTTP 跳转的处理方法。可能的取值如下：
   1. follow：默认值，fetch()跟随 HTTP 跳转。
   2. error：如果发生跳转，fetch()就报错。
   3. manual：fetch()不跟随 HTTP 跳转，但是response.url属性会指向新的 URL，response.redirected属性会变为true，由开发者自己决定后续如何处理跳转。
10. integrity：指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。 比如，下载文件时，检查文件的 SHA-256 哈希值是否相符， 确保没有被篡改fetch('http://site.com/file', { integrity: 'sha256-abcdef'});
11. referrer: 用于设定fetch请求的referer标头。这个属性可以为任意字符串，也可以设为空字符串（即不发送referer标头）。
12. referrerPolicy: 用于设定Referer标头的规则。可能的取值如下：
    1. no-referrer-when-downgrade：默认值，总是发送Referer标头，除非从 HTTPS 页面请求 HTTP 资源时不发送。
    2. no-referrer：不发送Referer标头。
    3. origin：Referer标头只包含域名，不包含完整的路径。
    4. origin-when-cross-origin：同源请求Referer标头包含完整的路径，跨域请求只包含域名。
    5. same-origin：跨域请求不发送Referer，同源请求发送。
    6. strict-origin：Referer标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送Referer标头。
    7. strict-origin-when-cross-origin：同源请求时Referer标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头。
    8. unsafe-url：不管什么情况，总是发送Referer标头。

使用案例

GET 方式请求

/**
 * 对象参数化，如对象 {a:1,b:2} 变成 字符串'a=1&b2'的过程
 */
function params(obj) {
    let arr = []
    for (let objKey in obj) {
        arr.push(objKey+"="+obj[objKey]);
    }
    return arr.join("&");
}

async function getData() {
    try {
        const response = await fetch('/url?'+params({a:1,b:2}));
        const data = await response.json();
        console.log(data)
    }catch (e) {
        console.error(e)
    }
}

POST请求，数据以json方式提交

async function postJsonData() {
    try {
        const response = await fetch('/url',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                a: 1,
                b: 1
            })
        });
        const data = await response.json();
        console.log(data)
    }catch (e) {
        console.error(e)
    }
}

POST请求，数据以key-value参数方式提交

async function postParamsData() {
    try {
        const response = await fetch('/url',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params({a:1,b:2})
        });
        const data = await response.json();
        console.log(data)
    }catch (e) {
        console.error(e)
    }
}