时间戳

首页 > 解决方案 > 如何在 Axios Mock 适配器中使用路径参数

javascript - 如何在 Axios Mock 适配器中使用路径参数

问题描述

我正在使用 axios 模拟适配器来模拟我的反应前端的数据。目前我正在使用 param 并且它正在工作。但我需要支持它来关注 url

.../发票/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;
};

标签： javascripttestingaxiosaxios-mock-adapter

解决方案

由于这是搜索“在路径中带有令牌的 axios 模拟适配器”时的最佳结果之一，因此我只想指出 axios 模拟适配器的 GitHub README 有解决方案。https://github.com/ctimmerm/axios-mock-adapter

您可以将正则表达式传递给.onGet，因此对于您的情况-

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

那应该会接听您的电话/invoice/${id}

推荐阅读