Блог

Я использую макетный адаптер axios для макетирования данных для моего интерфейса react. В настоящее время я работаю с параметром, и он работал. Но мне нужно поддерживать его по следующему URL

…/invoice/1

Это мой код

 let mock;
if (process.env.REACT_APP_MOCK_ENABLED === 'true') {
console.log('Simulation mode is enabled ');
mock = new MockAdapter(axios);

mock
    .onGet(apiUrl   '/invoice').reply(
    (config) => {
        return [200, getMockInvoice(config.params)];
    })
    .onGet(apiUrl   '/invoices').reply(
    (config) => {
        return [200, getMockInvoices(config.params)];
    });
    }
  

 export const getInvoice = async (id) => {
console.log(id);
try {
    const invoiceResponse = await axios.get(apiUrl   `/invoice/${id}`);
    return invoiceResponse.data;
} catch (e) {
    console.log(e);
 }
};
  

 export const getMockInvoice = (params) => {
let invoices = mockData.invoices;
let selectedInvoice = {} ;
for(let i in invoices){
    let invoice = invoices[i];
    if(invoice.invoiceNo === params.invoiceNo){
        selectedInvoice = invoice;
    }
}
return selectedInvoice;
};
  

Поскольку это один из лучших результатов при поиске «макета адаптера axios с токеном в path», я просто укажу, что в GitHub README для макета адаптера axios есть решение. https://github.com/ctimmerm/axios-mock-adapter

Вы можете передать регулярное выражение в .onGet , поэтому для вашего случая —

 const pathRegex = new Regexp(`${apiUrl}/invoice/*`);
mock
    .onGet(pathRegex).reply
...etc.etc.
  

Это должно отвечать на ваши вызовы /invoice/${id}

Для всех, кто также хочет получить объект js из динамической строки запроса URL

 mock.onGet(/api/test/?.*/).reply((config) => {
  console.log(config.url, parseQueryString(config.url));
  return [202, []];
});

function parseQueryString(url: string) {
  const queryString = url.replace(/.*?/, '');

  if (queryString === url || !queryString) {
    return null;
  }

  const urlParams = new URLSearchParams(queryString);
  const result = {};

  urlParams.forEach((val, key) => {
    if (result.hasOwnProperty(key)) {
      result[key] = [result[key], val];
    } else {
      result[key] = val;
    }
  });

  return resu<
}
  

Результат

 axios.get("api/test");
// api/test
// null

axios.get("api/test?foo=1amp;bar=two");
// api/test?foo=1amp;bar=two
// {foo: "1", bar: "two"}

axios.get("api/test?foo=FOOamp;bar=twoamp;baz=100");
// api/test?foo=FOOamp;bar=twoamp;baz=100
// {foo: "FOO", bar: "two", baz: "100"}

axios.get("api/test?foo=FOOamp;bar=twoamp;foo=loo");
// api/test?foo=FOOamp;bar=twoamp;foo=loo
// {foo: ["FOO", "loo"], bar: "two"}
  

Живая демонстрация