如何在GET方法中动态传参并指定Spotify API请求参数顺序

Hey there! Let's break down how to fix both your issues—dynamic parameter passing and getting that exact query string order you need.

1. Dynamic Parameter Passing in GET Requests #

Your current code already handles dynamic q parameter passing, but we can polish it to make it more robust:

• Add validation for the query parameter to avoid sending invalid requests
• Make other parameters (like limit, market) configurable if needed

Here's an improved version:

getArtists(query, customOptions = {}) {
  // Set default parameters
  const defaultParams = { 
    type: 'track,artist', 
    market: 'US', 
    limit: 10, // Updated to your desired limit
    offset: 5 
  };

  // Validate required query parameter
  if (typeof query !== 'string' || !query.trim()) {
    return Promise.reject(new Error('A non-empty search query is required'));
  }

  // Merge defaults with custom options (custom options override defaults)
  const params = {
    q: query,
    ...defaultParams,
    ...customOptions
  };

  // Rest of your code will go here...
}

This way, you can dynamically pass custom values for any parameter (e.g., getArtists('mmm', { limit: 20, market: 'GB' })) while keeping the required q parameter enforced.

2. Enforcing Custom Parameter Order #

The problem with your original code is that axios (which Vue's $http typically wraps) uses the qs library to serialize parameters, and it sorts parameters alphabetically by default. To get q right after search in the URL, we need to override this behavior.

Option 1: Manual URL Parameter String (Simple & Direct) #

If your parameter order is fixed, you can manually build the query string to guarantee the exact order:

getArtists(query) {
  if (typeof query !== 'string' || !query.trim()) {
    return Promise.reject(new Error('A non-empty search query is required'));
  }

  // Encode special characters in the query (critical for valid URLs)
  const encodedQuery = encodeURIComponent(query);
  // Build the query string in your desired order
  const queryString = `q=${encodedQuery}&type=track%2Cartist&market=US&limit=10&offset=5`;
  const fullUrl = `https://api.spotify.com/v1/search?${queryString}`;

  return this.$http.get(fullUrl)
    .then(response => console.log(response.data))
    .catch(error => console.log(error));
}

Option 2: Custom Parameter Serializer (Flexible) #

If you need to keep using the params object but control the order, use qs's sort option to define your preferred parameter order:

getArtists(query, customOptions = {}) {
  const defaultParams = { 
    type: 'track,artist', 
    market: 'US', 
    limit: 10, 
    offset: 5 
  };

  if (typeof query !== 'string' || !query.trim()) {
    return Promise.reject(new Error('A non-empty search query is required'));
  }

  const params = {
    q: query,
    ...defaultParams,
    ...customOptions
  };

  // Define your desired parameter order
  const paramOrder = ['q', 'type', 'market', 'limit', 'offset'];

  // Custom serializer to enforce the order
  const paramsSerializer = (params) => {
    return qs.stringify(params, {
      sort: (a, b) => paramOrder.indexOf(a) - paramOrder.indexOf(b)
    });
  };

  return this.$http.get("https://api.spotify.com/v1/search", { 
    params,
    paramsSerializer 
  })
    .then(response => console.log(response.data))
    .catch(error => console.log(error));
}

Note: If qs isn't already available in your project, you may need to install it via npm install qs.

Both options will generate the URL you want: https://api.spotify.com/v1/search?q=mmm&type=track%2Cartist&market=US&limit=10&offset=5

内容的提问来源于stack exchange，提问作者Umbro