我正在使用 Fetch 调用 Web 服务，但在 Axios 的帮助下我也可以这样做。所以现在我很困惑。我应该选择 Axios 还是 Fetch？
【问题讨论】：
Fetch 和 Axios 在功能上非常相似，但为了更好地向后兼容，Axios 似乎工作得更好（例如，fetch 在 IE 11 中不起作用，请查看this post）
此外，如果您使用 JSON 请求，以下是我偶然发现的一些差异。
获取 JSON 发布请求
let url = 'https://someurl.com';
let options = {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
property_one: value_one,
property_two: value_two
})
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
}
Axios JSON 发布请求
let url = 'https://someurl.com';
let options = {
method: 'POST',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
property_one: value_one,
property_two: value_two
}
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
let data = await response.data;
// do something with data
}
所以：
【讨论】：
Axios request is ok when status is 200 and statusText is 'OK' 2xx 范围内的其他 httpStatus（如 201 或 204）呢？
response.ok 是一个布尔值，true 或false 值表示响应是否正常。用户离线由fetch()拒绝处理，但其他类型的服务器错误由response.ok处理
它们是 HTTP 请求库...
我最终也有同样的疑问，但post 中的表格让我选择了isomorphic-fetch。这是fetch，但适用于 NodeJS。
http://andrewhfarmer.com/ajax-libraries/
上面的链接失效了 同一张表在这里：https://www.javascriptstuff.com/ajax-libraries/
【讨论】：
fetch 定义为Native（意味着您可以使用它 - 无需包含库，根据表源），而实际上fetch 是@ 987654327@（特别是在所有版本的 IE 中），无论如何您都需要为其提供外部 polyfill。
timeout 这样的基本ajax 功能（这很奇怪），我们必须使用单独的模块来实现这个基本功能。
fetch API 和 axios API 之间的另一个主要区别
【讨论】：
Axios 是一个独立的 3rd 方包，可以使用 NPM 轻松安装到 React 项目中。
您提到的另一个选项是 fetch 功能。与 Axios 不同，fetch() 内置于大多数现代浏览器中。使用 fetch，您无需安装第三方包。
所以这取决于你，你可以使用fetch()，如果你不知道自己在做什么，或者只使用我认为更直接的 Axios，可能会搞砸。
【讨论】：
axios的好处：
【讨论】：
此外...我在测试中使用了各种库，并注意到它们对 4xx 请求的不同处理。在这种情况下，我的测试返回一个带有 400 响应的 json 对象。这是 3 个流行的库处理响应的方式：
// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)
// node-fetch
const body = await fetch(url)
console.log(await body.json())
// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)
有趣的是 request-promise-native 和 axios 会抛出 4xx 响应，而 node-fetch 不会。 fetch 也使用一个 promise 进行 json 解析。
【讨论】：
.throws 方法来测试抛出的错误。在这种情况下，我正在测试来自 3 个库的拒绝情况，并注意到返回的数据存在差异。
Fetch API，需要处理两个promise来获取JSON Object属性中的响应数据。而 axios 生成 JSON 对象。
fetch 中的错误处理也不同，因为它不处理 catch 块中的服务器端错误，即使响应是 HTTP 404 或 500，从 fetch() 返回的 Promise 也不会拒绝 HTTP 错误状态。相反，它将正常解析（将 ok 状态设置为 false），并且只会在网络故障或任何阻止请求完成的情况下拒绝。在 axios 中，您可以在 catch 块中捕获所有错误。
我会说最好使用 axios，直接处理拦截器、标头配置、设置 cookie 和错误处理。
【讨论】：
我似乎做了很多工作，它是通过 ajax 发送表单，通常包括一个附件和几个输入字段。在更经典的工作流程（HTML/PHP/JQuery）中，我在客户端使用了$.ajax()，在服务器上使用了 PHP，并且完全成功。
我已经将 axios 用于 dart/flutter，但现在我正在学习 react 来构建我的网站，而 JQuery 没有意义。
问题是 axios 在另一方面让我对 PHP 感到头疼，同时发布正常输入字段并以相同的形式上传文件。我在 PHP 中尝试了 $_POST 和 file_get_contents("php://input")，使用 FormData 从 axios 发送或使用 json 构造，但我永远无法同时获取文件上传和输入字段。
另一方面，使用 Fetch 我已经成功使用此代码：
var formid = e.target.id;
// populate FormData
var fd = buildFormData(formid);
// post to remote
fetch('apiurl.php', {
method: 'POST',
body: fd,
headers:
{
'Authorization' : 'auth',
"X-Requested-With" : "XMLHttpRequest"
}
})
在 PHP 方面，我可以通过 $_FILES 检索上传并通过 $_POST 处理其他字段数据：
$posts = [];
foreach ($_POST as $post) {
$posts[] = json_decode($post);
}
【讨论】：
使用 fetch，我们需要处理两个 Promise。使用 axios，我们可以直接访问响应对象数据属性中的 JSON 结果。
【讨论】：