параметр запроса фильтра не работает через ax ios get из моего vue js приложения? - PullRequest
Новая
       138

параметр запроса фильтра не работает через ax ios get из моего vue js приложения?

0 голосов
/ 14 июля 2020

всякий раз, когда пользователь вводит что-либо в текстовое поле, появляется ax ios get запрос на URL-адрес http://sandbox4.wootz.io: 8080 / api / data / 1 / action /? Filter = {id} как '% TE% Сделано ', и предполагается, что он возвращает обратно все отфильтрованные результаты на основе поиска (что набрал пользователь) в качестве ответа. Но в настоящее время вместо того, чтобы возвращать отфильтрованные результаты в качестве ответа, он выдает все результаты (нефильтрованные результаты).

ПРИМЕЧАНИЕ: я протестировал вышеупомянутый 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);
  }
}

1 Ответ

1 голос
/ 14 июля 2020

Проблема в том, что вы неправильно кодируете строку запроса. В частности, ваши знаки % должны стать %25

. Для этого я настоятельно рекомендую использовать параметры params в Ax ios.

Например 

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'
...