axios封装请求的作用

axios是一个基于Promise的HTTP客户端，用于发送HTTP请求。封装axios请求的作用是为了简化代码，提高开发效率，并且可以统一处理请求和响应，实现统一的错误处理、拦截器等功能。

通过封装axios请求，可以将请求的配置、拦截器、错误处理等逻辑抽象出来，形成一个可复用的请求模块。这样，在项目中使用该封装后的请求模块，只需要关注业务逻辑，而不需要重复编写请求的配置和处理逻辑。

封装axios请求的好处有：
1. 提高代码复用性：将请求逻辑封装成一个模块，可以在多个地方复用，减少重复代码。
2. 统一管理请求配置：可以将请求的配置参数（如请求头、超时时间等）集中管理，方便修改和维护。
3. 统一处理错误：可以在封装的请求模块中统一处理请求错误，例如网络错误、服务器错误等，提供友好的错误提示或进行相应的处理。
4. 实现拦截器功能：可以在请求发送前或响应返回后进行拦截处理，例如添加公共请求头、对响应进行统一处理等。
5. 方便扩展和定制：可以根据项目需求自定义封装请求模块，添加额外的功能或修改默认配置。

相关问题

axios封装请求头

在Vue中使用axios发送请求时，可以通过设置请求头来携带token。具体步骤如下：

1. 在发送请求前，先获取token值。

2. 在axios的请求拦截器中，设置请求头，将token值添加到请求头中。

3. 在后端接收请求时，需要验证token的有效性，以确保请求的安全性。

示例代码如下：

// 获取token值
const token = localStorage.getItem('token');

// 设置axios的请求拦截器
axios.interceptors.request.use(config => {
  // 将token添加到请求头中
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 发送请求
axios.get('/api/user').then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
});

在上面的示例中，我们通过localStorage获取了token值，并将其添加到请求头中。在后端接收请求时，需要验证token的有效性，以确保请求的安全性。

axios封装请求代码

Axios 是一个流行的 JavaScript 库，用于在浏览器和 Node.js 环境中发送 HTTP 请求。封装 Axios 的代码可以帮助简化 API 请求的流程，提高代码可读性和可维护性。以下是一个简单的 Axios 封装示例，使用了 ES6 模块化和 Promise：

// 引入 Axios
import axios from 'axios';

// 创建一个 Axios 实例并设置默认配置
const service = axios.create({
  baseURL: process.env.BASE_API, // API 的基础 URL
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

// 定义错误处理函数
service.interceptors.response.use(
  (response) => response.data,
  (error) => {
    console.error('Error:', error.message);
    return Promise.reject(error);
  }
);

// 封装各种类型的请求方法
export const request = async (method, url, data = {}, config = {}) => {
  const mergedConfig = { ...service.defaults, ...config };
  try {
    if (method === 'get') {
      return await service.get(url, mergedConfig);
    } else if (method === 'post') {
      return await service.post(url, data, mergedConfig);
    } else if (method === 'put') {
      return await service.put(url, data, mergedConfig);
    } else if (method === 'delete') {
      return await service.delete(url, { data, ...mergedConfig });
    } else {
      throw new Error('Invalid method');
    }
  } catch (error) {
    // 如果你想添加错误处理逻辑，可以在catch里处理
    throw error;
  }
};

// 示例使用
try {
  const response = await request('get', '/users');
  console.log(response.data);
} catch (error) {
  console.error(error);
}