Fetch还是Axios——哪个更适合HTTP请求？
SegmentFault
共 5393字，需浏览 11分钟
·
2020-11-29 01:07
前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在Javascript中进行API调用。
几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员通常会决定在 .fetch() API和Axios之间进行选择。
在本文中，我想比较这两种方法，并简要介绍一下基本知识和语法。除此之外，我还将比较在两种情况下以及在错误处理中将数据转换为JSON格式的过程。我还将讨论HTTP拦截和下载进度。
开始吧！
Fetch概述和语法
在构建Javascript项目时，我们可以使用window对象，并且它带有许多可以在项目中使用的出色方法。这些功能之一是Fetch API，它提供了一种简单的全局 .fetch() 方法，这是一种从API异步获取数据的逻辑解决方案。
让我们看一下 .fetch() 方法的语法。
fetch(url)
.then((res) =>
// handle response
)
.catch((error) => {
// handle error
})
在上面的示例中，您可以看到简单的获取GET请求的语法。在 .fetch() 方法中，我们有一个强制性参数url，它返回一个Promise，可以使用Response对象来解决。
.fetch() 方法的第二个参数是选项，它是可选的。如果我们不传递 options，请求总是GET，它从给定的URL下载内容。
在选项参数里面，我们可以传递方法或头信息，所以如果我们想使用POST方法或其他方法，我们必须使用这个可选的数组。
正如我之前提到的，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))
Axios概述和语法
axios.get(url)
.then(response => console.log(response));
.catch((error) => console.log(error));
baseUrl params headers auth responseType
data，这是实际的响应主体 status，调用的HTTP状态，例如200或404 statusText，以文本消息形式返回的HTTP状态，例如 ok headers，服务器发回标头 config，请求配置 request，XMLHttpRequest对象
axios.post({
'/url',
{ name: 'John', age: 22},
{ options }
})
const config = {
url: 'http://api.com',
method: 'POST',
header: {
'Content-Type': 'application/json'
},
data: {
name: 'John',
age: 22
}
}
axios(config);
// 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.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)
}
})
fetch('url')
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json()
})
.then((data) => console.log(data))
.catch((error) => console.log(error))
下载进度
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))
总结
评论