axios 请求格式切换

原创

mob64ca12d9e536 2024-02-11 08:13:10 ©著作权

文章标签 ios 拦截器 javascript 文章分类 iOS 移动开发

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

如何实现axios请求格式切换

简介

在前端开发中，我们经常会使用axios作为HTTP请求库，它提供了方便的API来发送异步请求。在实际项目中，我们可能会遇到需要在不同的请求场景下切换请求格式的需求，比如切换请求头、添加token等。

本文将介绍如何使用axios实现请求格式切换的方法，并提供详细的步骤和代码示例。

实现步骤

步骤	描述
步骤一	创建axios实例
步骤二	设置请求拦截器
步骤三	设置响应拦截器
步骤四	发送请求

步骤一：创建axios实例

首先，我们需要创建一个axios实例，用于发送请求。通过axios.create()方法可以创建一个实例，并进行一些全局的配置，比如设置请求的baseURL、请求超时时间等。

import axios from 'axios';

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

在上述代码中，我们创建了一个名为instance的axios实例，并设置了请求的baseURL为'

步骤二：设置请求拦截器

接下来，我们需要设置请求拦截器，用于在发送请求之前对请求进行一些处理，比如添加请求头、设置token等。可以通过instance.interceptors.request.use()方法来设置请求拦截器。

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers['Content-Type'] = 'application/json'; // 设置请求头为JSON格式
    // 添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在上述代码中，我们通过instance.interceptors.request.use()方法设置了一个请求拦截器。在该拦截器中，我们可以对config进行一些修改，比如设置请求头的Content-Type为'application/json'，并添加token。

步骤三：设置响应拦截器

然后，我们需要设置响应拦截器，用于对响应进行一些处理，比如处理错误信息、统一处理响应数据等。可以通过instance.interceptors.response.use()方法来设置响应拦截器。

instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

在上述代码中，我们通过instance.interceptors.response.use()方法设置了一个响应拦截器。在该拦截器中，我们可以对response进行一些处理，比如返回响应数据的data字段。

步骤四：发送请求

最后，我们可以通过instance发送请求，并处理返回的结果。

instance.get('/api/users')
  .then((response) => {
    // 处理成功响应
    console.log(response);
  })
  .catch((error) => {
    // 处理错误响应
    console.log(error);
  });

在上述代码中，我们使用instance.get()方法发送一个GET请求，并在.then()中处理成功响应，在.catch()中处理错误响应。

至此，我们完成了axios请求格式切换的实现。