如何封装axios请求并对提交参数进行校验？

2023-12-04 18:31:18

封装axios请求

首先，我们需要先安装axios库：

npm install axios

然后，在项目中创建一个名为axios.ts的文件，并在其中封装axios请求：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://localhost:8080', // 设置基准URL
  timeout: 10000, // 设置超时时间
});

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

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 在收到响应之前做一些事情
    return response;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

// 暴露axios实例
export default instance;

这样，我们就封装好了axios请求，可以在项目中直接使用instance来发送请求。

2. 对提交参数进行校验

在发送请求之前，我们还需要对提交的参数进行校验，以确保参数的正确性和完整性。

我们可以使用joi库来进行参数校验：

npm install joi

然后，在项目中创建一个名为validation.ts的文件，并在其中定义参数校验规则：

import Joi from 'joi';

// 定义参数校验规则
const schema = Joi.object({
  name: Joi.string().required(),
  age: Joi.number().integer().min(18).max(100).required(),
  email: Joi.string().email().required(),
});

// 暴露参数校验规则
export default schema;

这样，我们就定义好了参数校验规则，可以在项目中直接使用schema来对参数进行校验。

3. 在请求中使用参数校验

在发送请求之前，我们需要先对提交的参数进行校验，如果校验通过，再发送请求，否则返回错误信息。

我们可以使用以下代码来实现：

import axios from './axios';
import validation from './validation';

// 发送请求
const response = await axios.post('/user', {
  name: 'John Doe',
  age: 25,
  email: 'johndoe@example.com',
});

// 对参数进行校验
const result = validation.validate(response.data);

// 如果校验通过，则打印结果
if (result.error) {
  console.log(result.error.details[0].message);
} else {
  console.log(result.value);
}