在现实场景中基于 Axios 封装网络请求服务的完整指南

2024-01-31 05:15:34

作为前端开发，在项目开发过程中，封装一套能够在业务当中使用的较为完善的网络请求服务是一项基本且重要的任务。本文将一步步带你了解如何在前端项目中基于 Axios 封装一套用于业务需求的网络请求服务，包括基础请求工具的封装、业务网络请求封装、API 的管理、视图层调用、网络请求拦截器、文件上传服务，最后总结网络请求封装的完整流程。

基础请求工具的封装

首先，我们需要封装一个基础的请求工具，用于处理常见的网络请求任务。我们可以使用 Axios 作为基础库，它是一个功能强大且易于使用的 JavaScript 库，可以轻松地发送 HTTP 请求。

import axios from 'axios';

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

export default request;

这个基础请求工具可以处理常见的请求任务，如 GET、POST、PUT 和 DELETE，并且可以轻松地配置请求头、超时时间和基础 URL 等。

业务网络请求封装

接下来，我们需要根据业务需求封装具体的网络请求服务。我们可以为不同的业务模块创建一个单独的服务文件，在每个服务文件中定义该模块的 API 接口。例如，对于用户模块，我们可以创建一个名为 user.js 的文件，并在其中定义用户相关的 API 接口：

import request from './request';

export const getUserInfo = (id) => {
  return request({
    url: `/users/${id}`,
    method: 'GET',
  });
};

export const createUser = (data) => {
  return request({
    url: '/users',
    method: 'POST',
    data,
  });
};

export const updateUser = (id, data) => {
  return request({
    url: `/users/${id}`,
    method: 'PUT',
    data,
  });
};

export const deleteUser = (id) => {
  return request({
    url: `/users/${id}`,
    method: 'DELETE',
  });
};

这样，我们就可以在业务代码中直接调用这些 API 接口来发送网络请求了。例如，要获取用户的信息，我们可以这样写：

import { getUserInfo } from './user';

getUserInfo(1).then((res) => {
  console.log(res.data);
});

API 的管理

为了更好地管理 API 接口，我们可以创建一个名为 api.js 的文件，在其中集中管理所有的 API 接口。我们可以将所有业务模块的 API 接口文件都导入到 api.js 中，并导出一个统一的 API 对象：

import * as user from './user';
import * as product from './product';
import * as order from './order';

export default {
  user,
  product,
  order,
};

这样，我们就可以在业务代码中直接通过 api 对象来访问所有的 API 接口了。例如，要获取用户的信息，我们可以这样写：

import api from './api';

api.user.getUserInfo(1).then((res) => {
  console.log(res.data);
});

视图层调用

在视图层，我们可以通过 Vuex 或者 Redux 等状态管理工具来调用网络请求服务。我们可以将网络请求封装成一个 Action，然后在组件中通过 dispatch 方法来触发这个 Action。例如，在 Vuex 中，我们可以这样写：

import { mapActions } from 'vuex';

export default {
  name: 'UserList',
  computed: {
    ...mapActions([
      'getUserList',
    ]),
  },
  mounted() {
    this.getUserList();
  },
};

在组件的 mounted() 生命周期钩子中，我们调用 getUserList Action 来获取用户列表。

网络请求拦截器

为了处理网络请求的全局拦截，我们可以使用 Axios 提供的拦截器功能。我们可以通过 request 和 response 两个拦截器来处理请求和响应数据。例如，我们可以这样写：

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

axios.interceptors.response.use((response) => {
  // 在收到响应之后做一些处理
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

我们可以通过拦截器来处理各种各样的需求，比如添加请求头、处理请求错误、处理响应数据等。

文件上传服务

如果需要上传文件，我们可以使用 Axios 提供的文件上传功能。我们可以使用 FormData 对象来构造一个表单数据对象，然后使用 post() 方法来上传文件。例如，我们可以这样写：

const formData = new FormData();
formData.append('file', file);

request.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
}).then((res) => {
  console.log(res.data);
});