很多基于 React 的应用都需要通过 API 与后端进行交互。在 Next.js 中，我们可以通过引入 axios 库来方便地发送请求。但是在使用 axios 的过程中，会出现一些与 SSR（服务端渲染）相关的问题，例如请求的重复发送以及 cookie 和 header 的传递问题。在本文中，我们将分享如何在 Next.js 中使用 axios 并解决这些问题。
安装 axios
首先，我们需要通过 npm 安装 axios：
npm install axios
在客户端发送 axios 请求
在客户端，我们可以直接使用 axios 发送请求，和平时使用 axios 一样。在 Next.js 中，需要在组件或页面的 componentDidMount 或 useEffect 函数中发送 axios 请求。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------- -
----- ------ -------- - ---------------
------------ -- -
----------------------
-------------- -- -----------------------
------------ -- --------------------
-- ----
-- ------- ------ ----------------------
------ ------------------
-上面的代码中，我们使用 axios.get 发送了一个 GET 请求，并在 useEffect 中处理了其结果。由于在客户端中发送的请求不会遭到请求重复发送的问题，这里没有涉及到任何问题。
在服务端发送 axios 请求
在服务端，我们通过 getInitialProps 函数获取数据并作为 props 传递给页面。下面是一个简单的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------------- - ------ ------------------------ - ---------------------- - ----- --- -- - ----- -------- - ----- ----------------------- ----- ---- - -------------- ------ - ---- -- -- ------ ------- -------
上面的代码中，我们在 MyPage 页面中使用 getInitialProps 函数发送了一个 GET 请求，并且将返回的数据作为 props 传递给页面进行渲染。由于在服务端中发送的请求只能在第一次加载页面时发送，这里也没有出现重复发送的情况。
服务端渲染共享 axios 实例
在服务端渲染时，由于每次请求渲染的页面都会重新创建新的组件实例，因此每个实例都会创建自己的 axios 实例，这会带来以下两个问题：
- 由于每个实例都创建了一个自己的实例，这可能会造成大量的内存资源浪费。
- 新实例的 cookie 和 header 选项不会自动包含上次请求设置的值，这会导致许多问题。
为了解决这个问题，我们可以在 Next.js 应用中使用一个共享的 axios 实例。这里我们可以借助于 axios 提供的 create 函数，详见下面的代码：
-- -------------------- ---- ------- -- -------------- ------ ----- ---- -------- ------ ----- ------------- - -------------- -------- -------------------------- ---------------- ----- -- -- ----- -- ------ --- -- --- ----- ------ --------------------------------------------- -- - -- ------------------ ----- --- ------ ------- --- ------------------------------------------------ -- - -- ------------------ ---- ------ ------ --------- ---
上面的代码中，我们定义了一个 axiosInstance 实例，并且在其中做了以下配置：
baseURL: 定义的 axios 实例的请求基地址，可以根据实际情况修改。withCredentials: 允许 axios 携带 cookie。interceptors: 定义 axios 实例的请求拦截器和响应拦截器。
在服务端共享 axios 实例
在服务端中，我们需要确保每个请求使用同一个 axios 实例。为了做到这一点，我们需要使用 Next.js 提供的 NextApiRequest 对象的 req 属性中，提供了 req.axiosInstance。这意味着我们可以为每个请求设置自定义的 axios 实例。
-- -------------------- ---- ------- ------ - ------------- - ---- --------------- ------ ------- ----- -------- ------------ ---- - ----- - ---- - - ----- ------------------------------- ---------- ---- --- - ------ ----- -------- -------------------- - ----- - ---- - - ----- --------------------------- ------ - ------ - ---- - -- -
在这里，我们使用 req.axiosInstance，确保每个服务端请求共享相同的 axios 实例。在 getServerSideProps 函数中，我们使用 axiosInstance，因为它是在客户端使用的的 axios 实例。
结论
在本文中，我们了解了如何在 Next.js 应用中使用 axios，并解决了在服务端渲染中出现的请求重复发送及 cookie 和 header 传递的问题。我们建议开发者尝试使用共享的 axios 实例，以避免内存资源浪费并确保设置的 cookie 和 header 可以在每个请求中传递。
参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67075891d91dce0dc86701de