时间戳

首页 > 解决方案 > 如何实现这样的 axios API 查询参数？

javascript - 如何实现这样的 axios API 查询参数？

问题描述

这是我第一次发现这样的API，params键中的表单就像一个数组但可能不是数组，它是如何在axios中实现的？

{baseUrl}/list?filter[v3_p.name]=Package Data&filter[pro.name]=Indosat&filter[pp.category]=Voucher&filter[pd.is_enable]=1

我在 axios 中的代码是这样的：

export const filterProduk = (data) => async (dispatch) => {
  try {
    const params = { filter: data }
    const res = await axios.get(`${baseUrl}/list`, data, {
      params,
      paramsSerializer: function paramsSerializer(params) {
        return Object.entries(Object.assign({}, params, { filter: 'HIDDEN' })).map(([key, value]) => `${key}=${value}`).join('&')
      }
    });
    dispatch({
      type: FILTER_SUCCESS,
      payload: res.data.data
    });
  } catch (error) {
    dispatch({
      type: FILTER_FAILED,
      payload: error.response.data,
    });
  }
};

我也试过了

export const filterProduk = (data) => async (dispatch) => {
  try {
    const res = await axios.get(`${baseUrl}/list`, data, {
      params: {
        filter: [data.package, data.provider, data.category, data.is_enable]
      }
    });
    dispatch({
      type: FILTER_SUCCESS,
      payload: res.data.data
    });
  } catch (error) {
    dispatch({
      type: FILTER_FAILED,
      payload: error.response.data,
    });
  }
};

我没有在任何文档中得到它，并希望在这里得到答案！谢谢

标签： javascriptreactjsapiaxios

解决方案

您可以使用qs.stringify序列化参数。你应该将config对象作为第二个参数传递给axios.get.

axios.get(`${baseUrl}/list`, {
  params,
  paramsSerializer: (params) => qs.stringify(params, { encode: false }),
})

axios.defaults.baseURL一个建议：您可以使用或创建自定义 axios 实例来设置 API 基本 URL ，并对其进行配置以避免在每次调用时都必须键入它。

// axios.js

import axios from 'axios'

export default axios.create({
  baseURL: 'https://api.example.com'
})

// queries.js

import axios from './axios'

axios.get('/list', {
  params,
  paramsSerializer: (params) => qs.stringify(params, { encode: false }),
})

推荐阅读