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