js fetch的简单使用

2022-06-24 14:34:11 阅读：251 来源： 互联网

标签：origin 标头请求 js 发送 Referer 简单 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
}

参数详解

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

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

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

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

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

标签：origin,标头,请求,js,发送,Referer,简单,fetch
来源： https://www.cnblogs.com/xiaogblog/p/16408732.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9