React和Next.js开发常见的HTTP请求方法

Fetch

get请求

优点：fetch是内置的，因此轻量，无需额外的安装

缺点：不具备缓存和错误状态的管理，需要手动解析响应

复制代码

fetch('url')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

对于post等其他请求，需要手动指定请求头和请求体内容类型

复制代码

//fetch
const url = 'https://api.example.com/postData'
const data = {
    key1: 'value1',
    key2: 'value2'
}
const options = {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'content-type': 'application/json'
    }
}
fetch(url, options).then(response => {
    if (!response.ok) {
        throw new Error('Network Response was not ok')
    }
    return response.json()
}).then(data => console.log(data))
    .catch(error => console.log('Error:', error))

Axios

优点：

更简洁的 API：axios 提供了简洁易用的 API，使得发送 HTTP 请求变得更加简单。
功能强大：

- 请求和响应拦截器：允许你在请求发送到服务器之前或响应返回客户端之前对其进行修改。
- 取消请求：如果请求还未完成，你可以通过提供的取消令牌（CancelToken）来取消它。
- 文件上传：axios 支持使用 FormData 对象来上传文件。
- 客户端支持防止 CSRF：默认情况下，axios 将发送一个 X-XSRF-TOKEN 头，这有助于防止跨站请求伪造（CSRF）。
- Promise 实现：基于 Promise 实现，使得异步编程更加直观和可维护。
- 支持浏览器和 Node.js：可以在浏览器和 Node.js 环境中使用。

缺点：

需要手动管理状态：与某些前端框架（如 Vue.js 的 Vuex 或 React 的 Redux）集成的状态管理库不同，axios 本身并不管理请求的状态（如加载中、已完成、错误等）。这需要开发者自行实现，可能会增加代码的复杂性。
无法自动处理加载和错误状态：如上述所说，axios 不会为你自动处理加载和错误状态。你需要监听请求的 then 和 catch 方法，并在其中处理相应的逻辑。

不过，这些缺点并不是 axios 本身的问题，而是它作为一个专注于发送 HTTP 请求的库所设计的初衷。对于状态管理和错误处理，你可以结合其他库（如 Vuex、Redux、React Query 等）来实现更完整的功能。

总的来说，axios 是一个强大且灵活的 HTTP 客户端库，它为你提供了很多方便的功能，并且与各种前端框架和库都有良好的兼容性。

复制代码

npm install axios

get请求

复制代码

import axios from 'axios'
axios.get('https://api.example.com/data')
.then(response=>console.log(response.data))
.catch(error=>console.error(error))

post等其他请求，支持直接传递请求头和请求体，语法更简洁

复制代码

//fetch
import axios from 'axios'
const url = 'https://api.example.com/postData'
const data = {
    key1: 'value1',
    key2: 'value2'
}
const headers = {
    'Content-Type': 'application/json'
}
axios.post(url, data, headers)
    .then(response => console.log(response.data))
    .catch(error => console.error(error))

TanStack Query

React query-Vue Query

支持react,vue等框架

概览 | TanStack Query 中文文档

一款专门为处理数据获取和状态管理设计的库，具有错误处理，加载状态，缓存等功能

复制代码

npm i @tanstack/react-query

优点：全面状态管理：提供明确的加载、错误和成功状态；

更少代码，简洁的代码实现复杂的功能

得空搓了个文档库，一入计算机深似海，学不完啊...,还有好多要做...