umi3项目axios 请求参数序列化参数

由于get 请求中有一个日期参数 dates 是一个数组类型。

未处理参数时请求地址是这样的:/api/list?page=1&pageSize=10&keyWord=&dates[]=2024-06-10&dates[]=2024-06-24

会发现dates后面有中括号,所以前端需要将参数格式处理变成如下:/api/list?page=1&pageSize=10&keyWord=&dates=2024-06-10&dates=2024-06-24

利用参数paramsSerializer,传递一个参数处理函数

import axios from 'axios'

const instance = axios.create({});

const { data } = await instance({
  url: '/records',
  method: 'GET',
  params,
  // 序列化参数
  paramsSerializer: function (params) {
    let str: string[] = [];
    for (let key in params) {
      // console.log('item', key);
      if (key === 'createdDates') {
        params[key]?.length &&
          str.push(...[`${key}=${params[key][0]}`, `${key}=${params[key][1]}`]);
      } else {
        str.push(`${key}=${params[key]}`);
      }
    }
    return str.join('&');
  },
});
UMI中使用axios进行封装可以按照以下步骤进行: 1. 首先,安装axios库。在终端中运行以下命令: ```bash npm install axios ``` 2. 在src目录下创建utils文件夹,并在其中创建一个api.js文件。这个文件将用于封装axios请求3. 在api.js文件中,引入axios库,并创建一个新的axios实例,同时设置一些默认配置。示例如下: ```javascript import axios from 'axios'; // 创建axios实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基本URL timeout: 5000, // 请求超时时间 }); export default instance; ``` 你可以根据需要修改基本URL和超时时间。 4. 接下来,在api.js文件中创建请求方法。你可以根据项目需求,创建GET、POST等请求方法。示例如下: ```javascript import request from './api'; // GET请求示例 export function getData(params) { return request.get('/data', { params }); } // POST请求示例 export function postData(data) { return request.post('/data', data); } ``` 以上示例代码中,getData方法用于发送GET请求,postData方法用于发送POST请求。 5. 在应用的其他地方,比如页面组件中,你可以引入这些请求方法,并使用它们发送请求。示例如下: ```javascript import { getData } from '@/utils/api'; // 在生命周期或事件处理函数中使用请求方法 getData({ id: 1 }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 这样,你就成功封装了axios,并在UMI中使用它进行网络请求。请根据具体需求进行相应的调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值