javascript - 我们如何保存记录的数据并使用rrweb重新播放？

我在vue.js中使用rrweb，遇到一个问题，即当我记录数据并再次播放它时，它就可以正常工作了。
但是我要先保存哪些数据，然后播放记录的项目。
我有这样的数据：

rrweb(){
            let vm = this;
            let stopFn = rrweb.record({
                emit(event) {
                    if (vm.events.length > 200) {
                        vm.count = vm.count + 1;
                        stopFn();
                        vm.play()
                    }
                    // recording
                    vm.events.push(event)
                }
            })
        },
        play(){
            let vm = this;
            if(vm.count==1){
                new rrwebPlayer({
                    target: document.getElementById('replay'), // customizable root element
                    data: {
                        events: vm.events,
                        autoPlay: true,
                    },
                });
                vm.save(vm.events);
            }
            else{
                console.log('else statement');
            }
        },
        save(events) {
            const body = JSON.stringify({ events });
            // console.log(body);
            events = [];
            fetch('deadend/getrrbData', {
                method: 'POST',
                headers: {
                'Content-Type': 'application/json',
                },
                body,
            });
        }

首先，我调用rrweb以及通过它调用的其他函数。
但是我对于如何在最后保存数据然后再次播放感到困惑。
链接供您参考。

https://github.com/rrweb-io/rrweb

https://gitlab.com/lbennett/vue-rrweb

最佳答案

确保端点工作正常，除非您输入'deadend / getrrbData'来不透露端点。
通过回调进行获取的参考链接：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


还要提一点，由于rrweb record返回了一个停止记录的函数，我不知道您是否能够播放记录的事件，因为您是在停止记录事件之后调用了vm.play。
除了POST URL端点之外，我真的没有发现您的代码有任何潜在问题，请查看此帖子提取请求示例

// Example POST method implementation:

try {
  const data = await postData('http://example.com/answer', { answer: 42 });
  console.log(JSON.stringify(data)); // JSON-string from `response.json()` call
} catch (error) {
  console.error(error);
}

async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

发送帖子请求后重播

您可以使用在POST正文中发送的相同事件

祝好运！