Axios + 查詢字符串

Question

我想知道如何使用查詢字符串 npm package 來簡化我的 axios 調用。 我使用的 package 是： https://www.npmjs.com/package/query-string

一個例子：

import qs from 'query-string';
import axios from 'axios';

axios.get(`http://localhost:3000/api/products${qs.parse({ offset: 0, limit: 12 })}`);

不知道為什么，但這不能按預期工作。

Answer 1

你真的不需要它。 Axios有一種標准方法可以將參數放入您的請求中，而無需任何額外的庫或手動執行某些操作。

axios
    .request({
      url: '/some/url',
      method: 'get',
      params: {
        offset: 0,
        limit: 12,
        unknown: '???'
      },
      ...
    })

必須轉換為/some/url?offset=0&limit=12&unknown=%3F%3F%3F 。

Answer 2

由於不需要使用查詢字符串，因為 axios 通過將參數放入請求中自動執行此操作。

但是，如果您想使用查詢字符串 package ，您可以通過這種方式進行操作。

這是一個簡短的示例，可以讓您對使用query-string有所了解。

 import qs from 'qs'; (https://www.npmjs.com/package/qs) import axios from 'axios'; export default axios.create({ baseURL: `http://localhost:3000/api/products`, params: (params) => { return qs.stringify(params, {offset: 0, limit: 12}); }, });

Answer 3

Axios提供了另一種方便而強大的方法，將您的查詢參數作為 object 發送到 http GET方法。

您可以通過以下方式更改您的請求：

axios.get('http://localhost:3000/api/products', {
    params: {
      offset: 0,
      limit: 12
    }
  })

Answer 4

為了使用模板文字，您需要使用反引號 ( ) 不是正常的引號。 代碼：

axios.get(`http://localhost:3000/api/products${qs.parse({ offset: 0, limit: 12 })}`);

如果您不想使用反引號，則不能使用${}語法。 就像正常的字符串插值一樣。

axios.get(‘http://localhost:3000/api/products'+qs.parse({ offset: 0, limit: 12 })});

Answer 5

this.$axios.get('/', {
    params: {},
    paramsSerializer: params => {
      return qs.stringify(params);
    }
  })