使用Promises的异步POST请求

async POST request using Promises

本文关键字：POST 请求 异步 Promises 使用      更新时间：2023-09-26

我正在构建一个简单的上传器，以前我已经构建了很多，但没有使用promise，我遇到了一个问题。当我调用promise时，我需要将我的"上传文件"绑定到下面代码中的表单数据对象（也称为data.append('xls', e.dataTransfer.files[0])），但是我不再能够访问e事件，因此我无法访问它并将其绑定到表单data对象。

错误-Uncaught (in promise) ReferenceError: e is not defined

<!DOCTYPE html>
<html>
<head>
    <script>
        //HELPER FUNCTION
        events = (o,type,handle)=>o.addEventListener(type,handle);
        listen = {
            drag: ['dragenter','dragover','drop','dragleave'],
            async: ['readystatechange','loadstart','progress','abort','error','load','timeout','loadend']
        };
        //PROMISES
        executor = {
            upload: (resolve,reject) =>{
                var data = new FormData();
                var client = new XMLHttpRequest();
                for(prop of listen.async){ events(client, prop, callback.upload[prop]);}
                //THIS IS WHERE MY PROBLEM LIES         
                data.append('xls', e.dataTransfer.files[0]);  
                client.addEventListener("load", callback.upload);
                client.open("POST", "/core/upload.php");
                client.send(data);
            }
        };
        //PROMISE CALLBACKS
        resolve = (value)=> console.log(value);
        reject = (reason)=> console.log(reason);    
        //EVENT HANDLES
        handles = {
            upload: {
                dragenter: (e)=> e.target.classList.remove('emboss'),
                dragover: (e)=> e.preventDefault(),
                drop: (e)=> {
                    e.preventDefault();
                    var p = new Promise(executor.upload);
                    console.log(p);
                },
                dragleave: (e)=> e.target.classList.add('emboss')   
            }
        };
        //ASYNC CALLBACKS
        callback = {
            upload: {
                readystatechange: (e)=> console.log(e.target.readyState),
                loadstart: (e)=> console.log('loadstart'),
                progress: (e)=> console.log('progress'),
                abort: (e)=> console.log('abort'),
                error: (e)=> console.log('error'),
                load: (e)=> console.log('load'),
                timeout: (e)=> console.log('timeout'),
                loadend: (e)=> console.log('loadend')
            }   
        };
        //INITIALIZATION
        init=()=>{
            var dropbox = document.getElementById('dropbox');
            for(prop of listen.drag){ events(dropbox, prop, handles.upload[prop]);}
        };  
        events(document,'DOMContentLoaded', init);
    </script>
</head>
<body>
    <div id='dropbox' class='fa fa-file-excel-o fa-4x emboss'></div>
</body>
</html>

基本问题是将从事件对象获得的参数传递给Promise的executor函数，注意该executor由Promise构造函数同步调用。

一种方法可能是创建一个executor工厂函数，该函数将参数保存在闭包中，但在存储文件参数值（执行器可以访问该值）时，这可能有些过头了。设置上传函数对象的属性，比如：

executor = {
    upload: (resolve,reject) =>{
            var data = new FormData();
            var client = new XMLHttpRequest();
            for(prop of listen.async){ events(client, prop, callback.upload[prop]);}
            data.append('xls', executor.upload.files);
            ....  // etc

并在创建承诺之前设置参数，

. . .
executor.upload.files = e.dataTransfer.files[0]`;
var p = new Promise(executor.upload);
. . .
相关文章：