关于 Fetch API 的注意事项

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞