fetch使用整理

fetch 使用

1. 浏览器支持情况

fetch是相对较新的技术,当然就会存在浏览器兼容性的问题,当前各个浏览器低版本的情况下都是不被支持的,因此为了在所有主流浏览器中使用fetch 需要考虑 fetch 的 polyfill 了

    require('es6-promise').polyfill();
    require('isomorphic-fetch');

引入这两个文件,就可以支持主流浏览器了

2. API

    fetch(url,{ // url: 请求地址
        method: "GET", // 请求的方法POST/GET等
        headers : { // 请求头(可以是Headers对象,也可是JSON对象)
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }, 
        body: , // 请求发送的数据 blob、BufferSource、FormData、URLSearchParams(get或head方法中不能包含body)
        cache : 'default', // 是否缓存这个请求
        credentials : 'same-origin', //要不要携带 cookie 默认不携带 omit、same-origin 或者 include
        mode : "", 
        /*  
            mode,给请求定义一个模式确保请求有效
            same-origin:只在请求同域中资源时成功,其他请求将被拒绝(同源策略)
            cors : 允许请求同域及返回CORS响应头的域中的资源,通常用作跨域请求来从第三方提供的API获取数据
            cors-with-forced-preflight:在发出实际请求前执行preflight检查
            no-cors : 目前不起作用(默认)

        */
    }).then(resp => {
        /*
            Response 实现了 Body, 可以使用 Body 的 属性和方法:

            resp.type // 包含Response的类型 (例如, basic, cors).

            resp.url // 包含Response的URL.

            resp.status // 状态码

            resp.ok // 表示 Response 的成功还是失败

            resp.headers // 包含此Response所关联的 Headers 对象 可以使用

            resp.clone() // 创建一个Response对象的克隆

            resp.arrayBuffer() // 返回一个被解析为 ArrayBuffer 格式的promise对象

            resp.blob() // 返回一个被解析为 Blob 格式的promise对象

            resp.formData() // 返回一个被解析为 FormData 格式的promise对象

            resp.json() // 返回一个被解析为 Json 格式的promise对象

            resp.text() // 返回一个被解析为 Text 格式的promise对象
        */ 
        if(resp.status === 200) return resp.json(); 
        // 注: 这里的 resp.json() 返回值不是 js对象,通过 then 后才会得到 js 对象
        throw New Error ('false of json');
    }).then(json => {
        console.log(json);
    }).catch(error => {
        consolr.log(error);
    })

3. 常用情况

1. 请求 json
    fetch('http://xxx/xxx.json').then(res => {
        return res.json();
    }).then(res => {
        console.log(res);
    })
2. 请求文本
    fetch('/xxx/page').then(res => {
        return res.text();
    }).then(res => {
        console.log(res);
    })
3. 发送普通 json 数据
    fetch('/xxx', {
        method: 'post',
        body: JSON.stringify({
            username: '',
            password: ''
        })
    });
4. 发送form 表单数据
    var form = document.querySelector('form');
    fetch('/xxx', {
        method: 'post',
        body: new FormData(form)
    });
5. 获取图片

URL.createObjectURL()

    fetch('/xxx').then(res => {
        return res.blob();
    }).then(res => {
        document.querySelector('img').src = URL.createObjectURL(imageBlob);
    })
6. 上传
    var file = document.querySelector('.file')
    var data = new FormData()
    data.append('file', file.files[0])
    fetch('/xxx', {
      method: 'POST',
      body: data
    })

4. 封装

    require('es6-promise').polyfill();
    require('isomorphic-fetch');

    export default function request(method, url, body) {
        method = method.toUpperCase();
        if (method === 'GET') {
            body = undefined;
        } else {
            body = body && JSON.stringify(body);
        }

        return fetch(url, {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body
        }).then((res) => {
            if (res.status >= 200 && res.status < 300) {
                return res;
            } else {
                return Promise.reject('请求失败!');
            }
        })
    }

    export const get = path => request('GET', path);
    export const post = (path, body) => request('POST', path, body);
    export const put = (path, body) => request('PUT', path, body);
    export const del = (path, body) => request('DELETE', path, body);

5. 参考

  • 5
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 将浏览器调试器中URL copy as fetch后转换成可用的POST参数的工具,可以使用以下方法实现。 首先,通过浏览器调试器的Network面板获取到需要转换的fetch请求的URL。将这个URL复制到剪贴板。 然后,可以编写一个脚本或使用现有的工具,用来解析URL并提取其中的参数。例如,可以使用JavaScript的URL API来解析URL并获取其中的查询参数。 接着,可以将提取到的参数转换成POST请求参数的格式。一种常见的格式是使用URL编码(URL encoding),即将参数名和参数值使用等号连接,并使用"&"符号连接多个参数。例如,参数name的值为"张三",参数age的值为25,那么转换后的POST参数可以是"name=%E5%BC%A0%E4%B8%89&age=25"。 最后,将转换后的POST参数作为请求的正文部分,并发送到服务器。可以使用各种HTTP请求库或工具来完成这个任务,比如Python的requests库或Postman工具。 通过以上步骤,就可以将浏览器调试器中URL copy as fetch后转换成可用的POST参数的工具实现。 ### 回答2: 将浏览器调试器中URL copy as fetch后转换成可用的POST参数的工具,可以通过编写一个自定义脚本来实现。 首先,我们需要解析浏览器调试器中复制的fetch请求URL,并提取其中的请求方法、请求头和请求体等信息。可以使用正则表达式或者URL解析库来提取这些信息。 接下来,我们需要将提取到的请求信息转换成可用的POST参数格式。对于请求头信息,我们可以将其转换成键值对的形式,作为POST的参数之一。对于请求体信息,如果是JSON格式的数据,我们可以直接将其作为POST的参数之一。如果是表单形式的数据,我们可以将其按照键值对的格式进行拼接,并作为POST的参数之一。 最后,我们将整理好的POST参数格式返回给用户,用户可以将其粘贴到其他工具或者代码中进行进一步的处理和使用。 需要注意的是,这个转换工具可能会因为不同浏览器或者调试器的差异而有些差异化。因此,我们建议在使用该工具之前,先了解自己所用浏览器和调试器的具体使用方法和相关规则,以确保转换结果的准确性。 ### 回答3: 有很多工具可以将浏览器调试器中的URL Copy as Fetch转换成可用的POST参数。以下是一个常用的工具介绍: Postman:Postman是一个非常方便的工具,它可以帮助我们发送HTTP请求并查看响应。使用Postman,我们可以将浏览器调试器中复制的URL粘贴到Postman中,并进一步设置HTTP方法为POST。然后,我们可以在Body选项卡中选择"form-data"或"raw"格式,并添加相应的参数和值。最后,我们可以点击"Send"按钮发送请求并查看响应。 另外,还有一些在线转换工具也可以实现这个功能。如: - https://curl.olsh.me/:这个网页提供一个可视化的界面,允许我们粘贴URL并选择HTTP方法和参数。然后,它会生成对应的Curl命令行,并显示POST参数的结果。 - https://apitester.com/:这个网页也提供了一个类似Postman的界面,可以粘贴URL并选择HTTP方法和参数。它还显示了对应的请求和响应的详细信息。 以上工具都可以帮助我们将浏览器调试器中URL Copy as Fetch转换成可用的POST参数。我们可以根据个人喜好或需求选择适合自己的工具。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值