其他
Fetch还是Axios——哪个更适合HTTP请求?
Fetch概述和语法
.fetch()
方法,这是一种从API异步获取数据的逻辑解决方案。.fetch()
方法的语法。fetch(url)
.then((res) =>
// handle response
)
.catch((error) => {
// handle error
})
.fetch()
方法中,我们有一个强制性参数url,它返回一个Promise,可以使用Response对象来解决。.fetch()
方法的第二个参数是选项,它是可选的。如果我们不传递 options
,请求总是GET,它从给定的URL下载内容。正如我之前提到的,Promise会返回Response对象,正因为如此,我们需要使用另一个方法来获取响应的主体。有几种不同的方法可以使用,取决于我们需要的格式:
response.json() response.text() response.formData() response.blob() response.arrayBuffer()
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
.then((response) => response.json())
.catch((error) => console.log(error))
method
、header
和 body
params。然后我使用 json()
方法将响应转换为JSON格式。axios
有一些优势,比如对XSRF的保护或取消请求。axios
库,我们必须将其安装并导入到我们的项目中。可以使用CDN,npm或bower安装 axios
。现在,让我们来看一个简单的GET方法的语法。axios.get(url)
.then(response => console.log(response));
.catch((error) => console.log(error));
.get()
方法创建一个简单的GET请求。如果你想在函数中使用POST方法,那么只需使用 .post()
方法代替,并将请求数据作为参数传递即可。baseUrl params headers auth responseType
axios
返回一个promise,该promise将与响应对象或错误对象一起解析。在响应对象中,具有以下值:data,这是实际的响应主体 status,调用的HTTP状态,例如200或404 statusText,以文本消息形式返回的HTTP状态,例如 ok
headers,服务器发回标头 config,请求配置 request,XMLHttpRequest对象
现在,让我们看一下带有数据的POST方法的代码示例。
axios.post({
'/url',
{ name: 'John', age: 22},
{ options }
})
post
方法,我们把config对象作为param,其中有URL、数据和附加选项。axios
。const config = {
url: 'http://api.com',
method: 'POST',
header: {
'Content-Type': 'application/json'
},
data: {
name: 'John',
age: 22
}
}
axios(config);
JSON
.fetch()
方法的时候,需要对响应数据使用某种方法,当我们在发送带有请求的body时,需要对数据进行字符串化。axios
中,它是自动完成的,所以我们只需在请求中传递数据或从响应中获取数据。它是自动字符串化的,所以不需要其他操作。fetch()
和 axios
获取数据。// fetch
fetch('url')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error))
// axios
axios.get('url')
.then((response) => console.log(response))
.catch((error) => console.log(error))
axios
我们没有额外的一行代码,在 .fetch()
的例子中,我们必须将数据转换为JSON格式。在一个较大的项目中,如果你创建了大量的调用,那么使用 axios
来避免重复代码会更舒服。错误处理
axios
点赞,因为处理错误是非常容易的。如果出现像404这样的错误响应,promise就会被拒绝并返回一个错误,所以我们需要捕获一个错误,我们可以检查它是什么类型的错误,就是这样。让我们看看代码示例。axios.get('url')
.then((response) => console.log(response))
.catch((error) => {
if (error.response) {
// When response status code is out of 2xx range
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
} else if (error.request) {
// When no response was recieved after request was made
console.log(error.request)
} else {
// Error
console.log(error.message)
}
})
.catch()
部分中的错误类型并返回正确的消息。.fetch()
方法,就比较复杂了。每次我们从 .fetch()
方法中得到响应时,我们需要检查状态是否成功,因为即使不是,我们也会得到响应。在 .fetch()
的情况下,只有当请求没有完成时,promise才会被解决。让我们看一下代码示例。fetch('url')
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json()
})
.then((data) => console.log(data))
.catch((error) => console.log(error))
.json()
方法,但如果没有,我必须在 .then()
里面返回错误。axios
绝对会是一个更好的解决方案,但如果你正在构建一个只有一两个请求的小项目,使用 .fetch()
是可以的,但你需要记住正确处理错误。下载进度
XMLHttpRequest.onprogress
回调。在 .fetch()
和 axios
中,有不同的方法来实现。.fetch()
中跟踪下载进度,我们可以使用其中一个 response.body
属性,一个 ReadableStream
对象。它逐块提供主体数据,并允许我们计算时间消耗了多少数据。axios
来管理,更容易更快,但 .fetch()
也提供了这种可能性,只是它需要更多的代码来开发同样的结果。HTTP拦截
axios
的情况下,HTTP拦截是这个库的关键功能之一,这就是为什么我们不需要创建额外的代码来使用它。让我们看一下代码示例,看看我们能做到多么容易。// 请求拦截
axios.interceptors.request.use((config) => {
console.log('Request sent');
})
// 响应拦截
axios.interceptors.response.use((response) => {
// do an operation on response
return response
})
axios.get('url')
.then((response) => console.log(response))
.catch((error) => console.log(error))
console.log
,告知发送请求的情况,在响应拦截中,我们可以对响应做任何操作,然后返回。.fetch()
默认不提供HTTP拦截功能,我们可以覆盖 .fetch()
方法,定义发送请求过程中需要发生的事情,当然,这需要更多的代码,可能比使用 axios
功能更复杂。总结
原文:https://medium.com/javascript-in-plain-english/fetch-or-axios-which-is-better-for-http-requests-a8e18d0defe2
作者:Harsh Patel
粉丝福利
130期留言中奖用户:this,速找我领取红包。
临走前留下,今天的福利
福利1:《Flutter从入门到进阶实战携程网APP》获取资源请在公众号对话框中回复关键字:005,如果没有关注请扫下吗的二维码 福利2:在看+留言,张张会在留言区随机抽取一位认真留言的小伙伴,给他发一个5~10不等的红包奖励
- END -
走心的分享更容易被抽中~
开奖时间 下期文末
推荐阅读
点赞 + 在看 + 留言
下一个幸运儿就是你
👇