Question

在我的项目中，我使用axios来简化Ajax请求。我创建了一个脚本，在其中向所有链接添加了一个侦听器，然后借助Axios发出了Ajax请求。我想在Ajax请求之后执行治疗。我做了一些测试，代码很好。但是，一旦我将其与axios一起放入then（）函数中，该代码便不再起作用

这是我的 PHP 代码

<tr class="table-light">
  <td>
    <a href="{{path('notification_read', {'id': notif.id})}}" class="btn btn-link js-read" title="Marquer comme lu">
      <i class="fas fa-dot-circle" style="color: Dodgerblue;"></i>
    </a>
  </td>
</tr>

和 JS ：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  function onClickBtnRead(event) {
    event.preventDefault();
    const url = this.href;
    var tr = $(this).closest("tr").get(0);
    $(tr).removeClass('table-light');

    this.href = '#';
    $(this).addClass('disabled');
    $(this).removeAttr('title');

    var i = $(this).children();
    $(i).css('color', '#D3D3D3');

    axios.get(url).then(function(response){
      console.log(response);
    });
  }

  document.querySelectorAll('a.js-read').forEach(function(link){
    link.addEventListener('click', onClickBtnRead);
  });
</script>

就像这样，它可以工作，但是我想将代码放入then（）函数中，就像这样：

function onClickBtnRead(event) {
  event.preventDefault();
  const url = this.href;

  axios.get(url).then(function(response) {
    console.log(response);
    var tr = $(this).closest("tr").get(0);
    $(tr).removeClass('table-light');

    this.href = '#';
    $(this).addClass('disabled');
    $(this).removeAttr('title');

    var i = $(this).children();
    $(i).css('color', '#D3D3D3');
  });
}

Ajax请求有效，但不再考虑之后的处理

（对不起，我的英语，因为我是法语，所以我使用翻译器）

Answer 1

您是否尝试过使用钩子而不是函数？...我不知道到底是什么问题。在实施Axios的那天，我在这里使用了这段代码：

// execute simultaneous requests 
axios.all([
  axios.get('https://api.github.com/users/mapbox'),
  axios.get('https://api.github.com/users/phantomjs')
])
.then(responseArr => {
  //this will be executed only when all requests are complete
  console.log('Date created: ', responseArr[0].data.created_at);
  console.log('Date created: ', responseArr[1].data.created_at);
});

也许在then函数中，您可以将要处理的内容放在请求的数据中。

如果您想了解更多信息，我发现有用的来源是：https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/

Javascript-axios请求后，脚本不起作用

1 个答案: