其他分享
首页 > 其他分享> > js fetch的简单使用

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 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