关于 Fetch API 的注意事项

2024年5月23日 209次阅读 来源: l1xnan 
fetch(url, {
    // 'GET', 'POST', 'PUT', 'DELETE'等
    method: 'GET', 
})

关于 GET 参数

发送GET请求时的query参数不能放到对象中（如：{a:1, b:2}） 必须在 url 字符串中：

const url = 'http://api.example.com/search?a=1&b=2'

可通过如下函数处理url：

function makeURL(url, params = {}) {
    let _URL = new URL(url, window.location.origin);
    Object.keys(params).forEach(key => _URL.searchParams.append(key, params[key]));
    return _URL
}
const url = makeURL('http://api.example.com/search',{
    a: 1,
    b: 2,
})

然后发起请求：

fetch(url, {
    method: 'GET'
})

关于 POST 请求体 body

如需通过POST请求的发送json，需要做字符串化处理：

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    }
    body: JSON.stringify({a: 1, b: 2})
})

关于 cookies

Fetch 发送请求默认不携带 cookies，如需携带，需要添加credentials: 'include' 参数：

fetch(url,{
    method: 'GET', // 'POST'等
    credentials: 'include',
})

关于 Headers

定义headers：

const headers = {
    "Content-Type": "application/x-www-form-urlencoded"
    "Authorization": "Token uynn887989afs989s8df9afa08&^&huh"
}

或

const headers = new Headers({
    "Content-Type": "application/x-www-form-urlencoded"
    "Authorization": "Token uynn887989afs989s8df9afa08&^&huh"
})

发送请求：

fetch(url, {
  method: "POST",
  headers: headers,
}

自定义的 headers中的键会经过 Headers 对象包装，会自动转换为小写。

// Create a test Headers object
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.append('Vary', 'Accept-Language');

// Display the key/value pairs
for (var [key,value] of myHeaders.entries()) {
    console.log(`${key}: ${value}`);
}

输出为：

content-type: text/xml
VM141:8 vary: Accept-Language

因此当我们发送 Authorization 令牌时，在服务端接收到的是 authorization，如果仍用 Authorization 处理，将发生错误。

文件上传失败解决

删除你的自定义Content-Type请求头设置

参见：fetch实（cai）践（keng）补充篇，文件上传Content-type multipart/form-data怎么设置

    原文作者：l1xnan
    原文地址: https://segmentfault.com/a/1190000010520266
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞