axios自定义请求体

实现axios自定义请求体

概述

在前端开发中，我们经常会使用axios来发送网络请求。有时候，我们需要自定义请求体，以满足特定的需求。本文将向你介绍如何实现axios自定义请求体。

流程图

flowchart TD
    A(创建axios实例) --> B(设置请求拦截器)
    B --> C(修改请求体)
    C --> D(发送请求)

类图

classDiagram
    axios 实例 -- 请求拦截器
    请求拦截器 -- 修改请求体

实现步骤

下面是实现axios自定义请求体的步骤：

步骤	操作
1	创建axios实例
2	设置请求拦截器
3	修改请求体
4	发送请求

1. 创建axios实例

首先，我们需要创建一个axios实例，可以在项目的启动文件中进行如下操作：

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

// 创建axios实例
const instance = axios.create({
  baseURL: '
  timeout: 5000
});

这里通过axios.create()方法创建一个axios实例，并设置了baseURL和timeout。

2. 设置请求拦截器

接下来，我们需要设置请求拦截器，在请求发送前修改请求体：

instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers['Content-Type'] = 'application/json';
    
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在请求拦截器中，我们可以对请求做一些处理，例如设置请求头。

3. 修改请求体

现在，我们可以在具体的请求中修改请求体：

instance.post('/login', {
  username: 'admin',
  password: '123456'
});

这里通过instance.post()方法发送一个POST请求，并传递了用户名和密码参数。

4. 发送请求

最后，我们可以发送请求并处理响应：

instance.post('/login', {
  username: 'admin',
  password: '123456'
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.log(error);
});

在发送请求后，我们可以通过.then()方法处理成功响应数据，通过.catch()方法处理请求错误。

通过以上步骤，你就可以轻松地实现axios自定义请求体了。希望对你有帮助！