jQuery Ajax beforesend, axios 的成功和错误答案

【问题标题】：jQuery Ajax beforesend, success and error with axiosjQuery Ajax beforesend, axios 的成功和错误
【发布时间】：2022-04-10 03:17:29
【问题描述】：

我在通过 formspree 发送的静态网页上有一个联系表。我正在尝试实现 ajax 提交以避免重定向页面。

我在 jQuery 中找到了这个 gist。

jQuery

var $contactForm = $('#contact-form');

$contactForm.submit(function(e) {
    e.preventDefault();
    var $submit = $('input:submit', $contactForm);
    var defaultSubmitText = $submit.val();

    $.ajax({
        url: '//formspree.io/your@email.com',
        method: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        beforeSend: function() {
            $submit.attr('disabled', true).val('Sending message…');
        },
        success: function(data) {
            $submit.val('Message sent!');
            setTimeout(function() {
                $submit.attr('disabled', false).val(defaultSubmitText);
            }, 5000);
        },
        error: function(err) {
            $submit.val('Oops, there was an error.');
            setTimeout(function() {
                $submit.attr('disabled', false).val(defaultSubmitText);
            }, 5000);
        }
    });
});

我只想使用原生 javascript，到目前为止，这就是我“翻译它”的方式

原生 JS

const form = document.querySelector('form');

form.addEventListener("submit", function(e){
    e.preventDefault();
    const $submit = form.querySelector('.contact__submit');
    const defaultSubmitText = $submit.innerHTML;

    axios({
        method: 'post',
        url: 'https://formspree.io/your@email.com',
        data: serialize(form)
        // https://plainjs.com/javascript/ajax/serialize-form-data-into-a-query-string-45/
    })
        .then(function(response) {
            console.log('SENT!!', response.data);
        })
        .catch(function(){
            console.log('ERROR!!');
        });
    //https://github.com/stefanpenner/es6-promise
});

我如何“翻译”beforeSend，让用户知道消息正在发送？

【问题讨论】：

好吧，你的beforeSend 不会改变xhr 对象，所以你可以在调用axios 之前做你的事情。
如果我们的beforeSend改变xhr对象呢？

标签： javascript jquery ajax axios

【解决方案1】：

我知道这已经过时了，但让我放弃我是如何让我的工作的。我在尝试用 vanilla JS 重写我的 jQuery 代码时遇到了同样的问题，我所做的是使用 interceptors。

使用您的示例代码

const form = document.querySelector('form');

form.addEventListener("submit", function(e){
    e.preventDefault();
    const $submit = form.querySelector('.contact__submit');
    const defaultSubmitText = $submit.innerHTML;

    // Axios BeforeSend equivalent
    axios.interceptors.request.use( config => {
       // Write whatever logic you want to run beforeSend here
        $submit.attr('disabled', true).val('Sending message…');

        return config; // very Important to add this, else Axios will cancel itself
    });

    axios({
        method: 'post',
        url: 'https://formspree.io/your@email.com',
        data: serialize(form)
        // https://plainjs.com/javascript/ajax/serialize-form-data-into-a-query-string-45/
    })
    .then(function(response) {
        console.log('SENT!!', response.data);
    })
    .catch(function(){
        console.log('ERROR!!');
    });
    //https://github.com/stefanpenner/es6-promise
});

您还可以选择执行BeforeReceive 之类的操作（即在返回响应之前执行某些操作）：

axios.interceptors.response.use( config => {
   // Write whatever logic you want to run beforeReceieve here
    return config;
});

【讨论】：