Javascript Axios参数中的多个值（逗号分隔）

所需的查询字符串：

http://fqdn/page?categoryID=1&categoryID=2

Axios获取请求：

fetchNumbers () {
  return axios.get(globalConfig.CATS_URL, {
    params: {
      ...(this.category ? { categoryId: this.category } : {})
    }
  })
    .then((resp) => {
      // console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

正如您所看到的，对于1个参数，它只需要1个值就可以很好地工作，但是如果我想生成多个值，它不起作用，我尝试使用数组：

...(this.category ? { categoryId: [1, 2] } : {})

但它是这样返回的：

http://fqdn/page?categoryID[]=1&categoryID[]=2

所以它就是不起作用。看看这个问题：

---

但我不知道他是如何解决这个问题的。

这不是axios相关的问题。这取决于后端服务是否能够以这种方式理解查询参数（似乎依赖于框架）。从您的问题来看，我认为当发送下面这样的查询参数时，它不起作用

?categoryID[]=1&categoryID[]=2

它期望

?categoryID = 1,2

您可以做的是将数组转换为这样的字符串，然后再将其传递给axios中的参数。更新代码中的以下部分，它应该可以解决您的问题

...(this.category ? { categoryId: this.category.join(',') } : {})

请看下面的线程

---

这不是与axios相关的问题。这取决于后端服务是否能够以这种方式理解查询参数（似乎依赖于框架）。从您的问题来看，我认为当发送下面这样的查询参数时，它不起作用

?categoryID[]=1&categoryID[]=2

它期望

?categoryID = 1,2

您可以做的是将数组转换为这样的字符串，然后再将其传递给axios中的参数。更新代码中的以下部分，它应该可以解决您的问题

...(this.category ? { categoryId: this.category.join(',') } : {})

请看下面的线程

您可以使用Axios自定义请求中参数的序列化

请注意，按预期方式序列化阵列数据：

const searchParams = new URLSearchParams();
searchParams.append('foo', 1);
searchParams.append('foo', 2);
console.log(searchParams.toString()); // foo=1&foo=2

因此，您可以在

paramsSerializer

中使用该类，如下所示：

// my-axios.js
export default axios.create({
  paramsSerializer(params) {
    const searchParams = new URLSearchParams();
    for (const key of Object.keys(params)) {
      const param = params[key];
      if (Array.isArray(param)) {
        for (const p of param) {
          searchParams.append(key, p);
        }
      } else {
        searchParams.append(key, param);
      }
    }
    return searchParams.toString();
  }
});

// Foo.vue
import axios from './my-axios.js';

export default {
  methods: {
    async send() {
      const { data } = await axios({
        url: '//httpbin.org/get',
        params: {
          categoryId: [1, 2, 3]
        }
      });

      // ...
    }
  }
}

您可以使用Axios自定义请求中参数的序列化

请注意，按预期方式序列化阵列数据：

const searchParams = new URLSearchParams();
searchParams.append('foo', 1);
searchParams.append('foo', 2);
console.log(searchParams.toString()); // foo=1&foo=2

因此，您可以在

paramsSerializer

中使用该类，如下所示：

// my-axios.js
export default axios.create({
  paramsSerializer(params) {
    const searchParams = new URLSearchParams();
    for (const key of Object.keys(params)) {
      const param = params[key];
      if (Array.isArray(param)) {
        for (const p of param) {
          searchParams.append(key, p);
        }
      } else {
        searchParams.append(key, param);
      }
    }
    return searchParams.toString();
  }
});

// Foo.vue
import axios from './my-axios.js';

export default {
  methods: {
    async send() {
      const { data } = await axios({
        url: '//httpbin.org/get',
        params: {
          categoryId: [1, 2, 3]
        }
      });

      // ...
    }
  }
}

---

我假设

这个类别应该是一个数组，对吧>@AlexanderKim是的，根据你的问题，它是一个数组。categoryId:[1，2]我不太明白，我在上面的代码中显示了
。（this.category？{categoryId:[1，2]}:{}）
我刚硬编码了一个数组，得到了结果
？categoryId[]=1&categoryId[]=2
，你建议这样做吗？如果我不高兴，请纠正我wrong@AlexanderKim我建议categoryId:[1,2]。加入（'，'）我假设
这个。category
应该是一个数组，对吧>@AlexanderKim是的，根据你的问题，它是一个数组。categoryId:[1，2]我不太明白，我在上面的代码中显示了
。（this.category？{categoryId:[1，2]}:{}）
我刚硬编码了一个数组，得到了结果
？categoryId[]=1&categoryId[]=2
，你建议这样做吗？如果我不高兴，请纠正我wrong@AlexanderKim我建议categoryId:[1,2]。加入（“，”）谢谢，这里的
async
/
wait
有什么用？是ES2017功能。如果ES2017在您的项目中不可用，您可以使用ES2016等效代码：
send（）{axios（…）。然后（response=>{const data=response.data；}）；}
谢谢，这里的
async
/
wait
有什么用？是ES2017功能。如果ES2017在您的项目中不可用，您可以使用ES2016等效代码：
send（）{axios（…）。然后（response=>{const data=response.data；}）；}