使用 Next.js 抽离通用的 axios request 请求-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的不断发展，前端的业务逻辑越来越复杂，需要和后端进行数据交互。而 axios 是一个非常好用的 HTTP 请求库，为我们提供了很多方便的接口。但是在项目中，我们经常需要对 axios 进行封装，以满足业务需求。在使用 Next.js 进行服务端渲染时，更需要对 axios 进行封装，以充分利用 SSR 的优势。

为什么要抽离通用的 axios request 请求

在前端开发中，我们经常需要对 axios 进行封装，以满足业务需求。例如，我们可能需要在请求前加上一些公共参数，或者在请求失败时进行统一的错误处理。在使用 Next.js 进行服务端渲染时，更需要对 axios 进行封装，以充分利用 SSR 的优势。如果我们直接在组件中使用 axios，那么每次请求都会重新创建一个 axios 实例，这样会导致一些不必要的性能损失。而如果我们将 axios 封装成一个通用的 request 方法，并在服务端和客户端共用，就可以充分利用 axios 的缓存机制，提高性能。

如何抽离通用的 axios request 请求

我们可以将 axios 封装成一个通用的 request 方法，以便在项目中进行调用。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
// utils/request.js
import axios from 'axios';

const request = axios.create({
  baseURL: 'https://api.example.com',
});

request.interceptors.request.use((config) => {
  // 在请求发送之前对 config 进行处理
  return config;
}, (error) => {
  // 对请求错误进行处理
  return Promise.reject(error);
});

request.interceptors.response.use((response) => {
  // 对响应数据进行处理
  return response;
}, (error) => {
  // 对响应错误进行处理
  return Promise.reject(error);
});

export default request;

在上面的代码中，我们首先使用 axios.create 方法创建了一个 axios 实例，并设置了 baseURL。然后我们使用 request.interceptors.request.use 和 request.interceptors.response.use 方法对请求和响应进行拦截，以便进行统一的处理。最后，我们将封装好的 request 方法导出，以便在项目中进行调用。

如何在 Next.js 中使用抽离通用的 axios request 请求

在 Next.js 中，我们可以使用 getInitialProps 方法来进行服务端渲染。但是在服务端渲染时，我们不能直接在组件中使用 axios，而是需要使用封装好的 request 方法。下面是一个简单的示例代码：

// javascriptcn.com 代码示例
// pages/index.js
import request from '../utils/request';

function Home({ data }) {
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

Home.getInitialProps = async () => {
  const response = await request.get('/posts');
  const data = response.data;
  return { data };
};

export default Home;

在上面的代码中，我们首先导入了封装好的 request 方法。然后在组件的 getInitialProps 方法中，我们使用 request.get 方法获取数据，并将获取到的数据作为 props 传递给组件。这样，在服务端渲染时，就可以充分利用 axios 的缓存机制，提高性能。

总结

使用 Next.js 进行服务端渲染时，我们需要对 axios 进行封装，以充分利用 SSR 的优势。我们可以将 axios 封装成一个通用的 request 方法，并在服务端和客户端共用。在使用封装好的 request 方法时，我们需要注意不能直接在组件中使用 axios，而是需要使用封装好的 request 方法。通过这样的方式，我们可以充分利用 axios 的缓存机制，提高性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6508107995b1f8cacd33a756