javascript – 使用fetch代替jQuery的ajax进行GET API调用

我最近发现自己转换了一个调用远程API的函数,从返回一个回调到返回一个Promise.我认为这也是一个很好的机会,也可以用fetch调用替换$.ajax调用,因为fetch已经返回了Promise.

但是,此特定调用是实际需要有效负载(包含密钥和返回类型)的GET.具体来说,我称之为：

$.ajax({
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    url: config.serviceUrl,
    data: {
        apiKey: key,
        format: 'json'
    }
})
.done(data => {...})
.fail((jqXHR, textStatus, errorThrown) => {...});

但是,fetch没有data属性,如果你尝试发送一个带有GET请求的主体,它会抛出一个错误(TypeError：无法执行’fetch’：使用GET / HEAD方法的请求不能有主体).根据Chromium forums,这是预期的行为.

请记住：我完全无法控制外部API,所以提到使用GET发送有效负载违反了某些API协议,或建议我更改底层调用,这没有用.

在这种情况下是否可以使用fetch？怎么样？

解决方法:

jQuery的ajax函数只是将数据附加到URL作为GET请求的URL参数：

data

Data to be sent to the server. It is converted to a query string, if not already a string. It’s appended to the url for GET-requests.

Source

使用fetch,您可以手动执行,也可以使用类似的方法：

var url = new URL("http://youapi.com")
var data = {
    apiKey: key,
    format: 'json'
}

Object.keys(data).forEach(key => url.searchParams.append(key, data[key]))
fetch(url)