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

Question

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

注意：我已经通过邮递员发出获取请求测试了上面提到的URL，它给出了过滤后的结果perfectly.Why是不是通过我的应用程序代码发生了同样的事情？请帮助

 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'

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

filter query param not working through axios get from my vue js application?

query-parameters

vue.js

axios