在javascript中发送请求在其他人之前运行答案

【问题标题】：send request run before others in javascript在javascript中发送请求在其他人之前运行
【发布时间】：2020-09-03 13:53:12
【问题描述】：

我有这样的功能：

function sendRQ(url,filename){
new Promise(function (resolve, reject) {
    console.log('111');
    var request = new XMLHttpRequest();
    request.timeout = 2000;
    request.open('GET', url, true);
    request.responseType = 'blob';
    console.log('222');
    request.onload =  function (){
        console.log('333');
        let reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload = function (e) {
            console.log('444');
            var base = e.target.result;
            resolve(base);
            var arr = base.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        };
        console.log('555');

    };
    request.send();
    console.log('666');

}).then(function (dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    console.log('777');
    return new File([u8arr], filename, {type: mime});
}).then(function (file) {
    console.log('888');

    return file;
});}

我在每个级别设置了 console.log 以获得运行步骤的优先级。但是在回显“222”之后回显“666”。我该如何解决？我设置了 promise ，但是 in 不能正常工作！

【问题讨论】：

你希望它发生的顺序（我的意思是记录）
在console.log(222)之后；我想等待 runnig request.onload 然后其他.. 但它运行 console.log(666)
最后返回文件时，文件未定义
发生这种情况是因为您在此行中使您的请求异步：request.open('GET', url, true); 当您将第三个参数作为true 传递时 - 请在 MDN 上检查此 async and sync requests。但我现在不建议使用同步请求
控制台是否记录了“333”和“444”，如果没有，那么请求没有成功，它可能会失败。

标签： javascript ajax promise async-await wait

【解决方案1】：

这是正常的，因为您使用的是异步 ajax 在这一行

request.onload =  function (){

你只是在声明一个将被执行的函数。当 onload 事件被触发时。

因此，在发出 onload 之后，记录 222 然后声明函数然后记录 555 是正常的。然后函数被执行。

您可以调用 resolve 和 path 任何数据。这些数据将来自 promise.then(data => {}) 拒绝数据将来自 promise.catch(err => {})

在你的情况下，你正在解决基础我认为您的意思是解决 File([u8arr], filename, {type: mime})

如果你想解析 new File([u8arr], filename, {type: mime})

reader.onload = function (e) {
        console.log('444');
        var base = e.target.result;
        var arr = base.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        resolve(new File([u8arr], filename, {type: mime}));
    };

并删除它，因为您已经解析了该文件

then(function (dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}
console.log('777');
return new File([u8arr], filename, {type: mime});

})

【讨论】：

我应该在 request.onload 中设置等待。但是当我在那里设置时，它不起作用。我不知道怎么设置！
对于像request.onload这样的调试，为错误request.onerror = function(event) { console.log("Error"); reject(); };编写一个函数；以确保请求没有得到错误而不是成功。