过滤查询参数不能通过 axios 从我的 vue js 应用程序获取？

Question

每当用户在文本字段中输入任何内容时，都会向 url 发出 axios get 请求 http://sandbox4.wootz.io:8080/api/data/1/action/?filter={id}like'%TE%' 已生成，它应该根据搜索（用户输入的内容）返回所有过滤结果作为响应。但目前它不是将过滤后的结果作为响应返回，而是给出所有结果（未过滤的结果）。

注意：我已经通过邮递员通过发出 get 请求测试了上述 URL，它完美地给出了过滤结果。为什么我的应用程序代码没有发生同样的情况？请帮助

 getAsyncDataAction: debounce(function(name) {
      if (!name.length) {
        this.dataAction = [];
        return;
      }
      this.isFetching = true;
    
      api
        .getSearchData(this.sessionData.key,`/action/?filter={id}like'%${name}%'`)    
        .then(response => {
          this.dataAction = [];
                  response.forEach(item => {
            this.dataAction.push(item);
          });
          console.log('action results are'+JSON.stringify(this.dataAction)) //displays all the results(non-filtered)
        })
        .catch(error => {
          this.dataAction = [];
          throw error;
        })
        .finally(() => {
          this.isFetching = false;
        });
    }, 500), 

api.js

import axios from 'axios';
const props = {
  base_url: '/api/store',
  search_url: '/api/entity/search',
  cors_url: 'http://localhost',
  oper_url: '/api'
};

axios.defaults.headers.get['Access-Control-Allow-Origin'] = props.cors_url;
axios.defaults.headers.post['Access-Control-Allow-Origin'] = props.cors_url;
axios.defaults.headers.patch['Access-Control-Allow-Origin'] = props.cors_url;

async function getSearchData(key, path) {
  try {
    console.log('inside getSearchData path value is'+path)
    console.log('inside getSearchData and url for axios get is '+props.base_url + '/data' + path)

    let response = await axios({
      method: 'get',
      url: props.base_url + '/data' + path,
      headers: {'session_id': key}
    });

    if (response.status == 200) {
      console.log(response.status);
    }
    return response.data;
  } catch (err) {
    console.error(err);
  }
}

Answer 1

问题是您没有正确编码查询字符串。特别是，您的% 标志需要变为%25

为此，我强烈建议在 Axios 中使用 params 选项。

例如

async function getSearchData(key, path, params) { // ? added "params"

  // snip

  let response = await axios({
    method: 'get',
    url: `${props.base_url}/data${path}`,
    params, // ? use "params" here
    headers: {'session_id': key}
  });

然后调用你的函数

const params = {}

// check for empty or blank "name"
if (name.trim().length > 0) {
  params.filter = `{id}like'%${name}%'`
}

api
  .getSearchData(this.sessionData.key, '/action/', params)

---

或者，手动编码查询参数

const filter = encodeURIComponent(`{id}like'%${name}%'`)
const path = `/action/?filter=${filter}`

应该产生类似的东西

/action/?filter=%7Bid%7Dlike'%25TE%25'