封装axios请求并返回结果

原创

mob649e815ddfb8 2024-06-04 03:50:56 ©著作权

文章标签 ios 封装复杂度 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e815ddfb8的原创作品，请联系作者获取转载授权，否则将追究法律责任

封装axios请求并返回结果

在Web开发中，经常会涉及到前端与后端的数据交互。而axios是一个基于Promise的HTTP客户端，用于发送异步请求。但是在实际开发中，我们经常需要对axios进行封装，以便统一处理请求的逻辑，简化代码的复杂度。

为什么要封装axios请求

统一处理请求逻辑：封装axios可以统一处理请求的逻辑，比如设置请求头、处理错误响应等。
简化代码复杂度：通过封装axios，可以将请求逻辑抽象成一个函数，方便调用和维护。
提高开发效率：封装axios可以提高开发效率，避免重复编写相似的请求代码。

封装axios请求

下面是一个简单的示例，演示了如何封装axios请求并返回结果：

import axios from 'axios';

const instance = axios.create({
  baseURL: '
});

export const fetchData = async (url, method, data) => {
  try {
    const response = await instance({
      url,
      method,
      data
    });
    return response.data;
  } catch (error) {
    throw new Error(error.response.data);
  }
};

在上面的代码中，我们首先导入axios，并创建一个axios实例。然后定义了一个名为fetchData的函数，用于发送请求并返回数据。在函数内部，我们使用axios实例发送请求，并返回响应数据。如果请求出现错误，我们会抛出一个包含错误信息的Error对象。

使用封装的axios请求

接下来，我们可以使用封装的axios请求函数fetchData来发送请求：

import { fetchData } from './api';

const url = '/users';
const method = 'get';

fetchData(url, method)
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们首先导入封装的axios请求函数fetchData，然后定义了请求的URL和方法。最后调用fetchData函数发送请求，并处理返回的数据或错误。