axios-mock-adapterで動的なurlのリクエストを取得する方法
URLの末尾にパラメータがはいるリクエストの場合
- 例
/hoge/piyo/0123456789
/hoge/piyo/9876543210
リクエスト投げる側
export default {
data() {
return {
fuga:null, // fugaが可変
};
},
mounted() {
this.$axios.get("/hoge/piyo/",{ params: { fuga: this.fuga} })
.then((response) => {
console.log(responce)
})
.catch((e) => {
console.log(e)
});
});
}
}
mock
export default {
mock.onGet('/hoge/piyo/').reply(config => {
if(config.params.fuga == '0123456789') {
res = 'param1'
}
if(config.params.fuga == '1234567890') {
res = 'param2'
}
return [200, res]
}),
}
URLの途中にパラメーターが入るようなリクエストの場合
- 例
/hoge/0123456789/piyo
/hoge/9876543210/piyo
リクエスト投げる側
export default {
data() {
return {
fuga:null, // fugaが可変
};
},
mounted() {
this.$axios.get("/hoge/" + this.fuga + "/piyo")
.then((response) => {
console.log(responce)
})
.catch((e) => {
console.log(e)
});
});
}
}
mock
function checkRequestUrl(path = '') {
// ":"から始まる単語構成文字(a-zA-Z_-^9)を"/"を含まない文字列を許容するように置換する
path = typeof path === 'string'
? new RegExp(path.replace(/:\w+/g, '[^/]+'))
: path
return path
}
export default {
checkRequestUrl,
mock.onGet(checkRequestUrl('/hoge/:fuga/piyo')).reply(config => {
// パラメータを取得してパラメータごとに返却値を変更する
var params = config.url.match(/\/hoge\/(.+)\/piyo/);
let res = ''
if(params[1] == '0123456789') {
res = 'param1'
}
if(params[1] == '1234567890') {
res = 'param2'
}
return [200, res]
}),
}
参考
How to mocking a http request with route params using axios-mock-adapter