Next.js 中如何对 axios 进行封装

前言

在前端开发中，我们经常需要通过网络请求获取数据。而 axios 是一个非常流行的 HTTP 客户端，它可以让我们更方便地发送请求和处理响应。但是，使用 axios 的时候，我们可能会遇到一些重复性的代码，比如设置请求头、处理错误等。这时候，对 axios 进行封装就显得尤为重要。

在本篇文章中，我们将介绍如何在 Next.js 中对 axios 进行封装，让我们的代码更加简洁、易读、易维护。

封装 axios

创建 axios 实例

首先，我们需要创建一个 axios 实例，这个实例可以统一配置一些请求头、响应拦截器等。我们可以在 utils 目录下创建一个 axios.js 文件，用来封装 axios。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

在上面的代码中，我们创建了一个名为 instance 的 axios 实例，它的 baseURL 是 https://api.example.com，timeout 是 5000 毫秒，headers 包含了一个 'Content-Type': 'application/json' 的请求头。这些配置可以根据实际情况进行修改。

封装请求方法

接下来，我们需要封装一些常用的请求方法，比如 GET、POST 等。我们可以在 utils 目录下创建一个 request.js 文件，用来封装这些请求方法。

import instance from './axios';

export const get = (url, params) => {
  return instance.get(url, { params });
};

export const post = (url, data) => {
  return instance.post(url, data);
};

在上面的代码中，我们封装了两个请求方法，分别是 get 和 post。它们分别调用了 axios 实例的 get 和 post 方法，并将请求参数传递给它们。这样，我们就可以在项目中直接使用这些方法，而不需要重复地设置请求头、处理错误等。

添加响应拦截器

最后，我们需要添加一个响应拦截器，用来处理一些通用的错误。我们可以在 utils 目录下创建一个 interceptors.js 文件，用来封装这个响应拦截器。

import instance from './axios';

instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    const { response } = error;
    if (response) {
      // 处理服务器返回的错误信息
    } else {
      // 处理网络异常等错误信息
    }
    return Promise.reject(error);
  }
);

在上面的代码中，我们添加了一个响应拦截器，它会在每次请求完成后执行。如果请求成功，它会返回响应数据；如果请求失败，它会进入到 error 分支中，我们可以根据错误类型进行相应的处理。

使用封装后的 axios

使用封装后的 axios 非常简单，我们只需要在需要发送请求的地方引入 request.js 文件，然后调用相应的方法即可。

import { get, post } from '../utils/request';

// 发送 GET 请求
get('/users', { page: 1, limit: 10 })
  .then(data => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误信息
  });

// 发送 POST 请求
post('/users', { name: 'Alice', age: 18 })
  .then(data => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误信息
  });

在上面的代码中，我们使用了封装后的 get 和 post 方法发送了 GET 和 POST 请求。如果请求成功，我们可以在 then 回调函数中处理响应数据；如果请求失败，我们可以在 catch 回调函数中处理错误信息。

总结

本篇文章介绍了如何在 Next.js 中对 axios 进行封装，让我们的代码更加简洁、易读、易维护。我们通过创建 axios 实例、封装请求方法、添加响应拦截器等方式，实现了对 axios 的封装。在实际开发中，我们可以根据实际情况进行配置和修改，让我们的代码更加符合业务需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e4b9ceb4cecbf2d41ad16