async POST-запрос с использованием Promises

-2

Я строю простой загрузчик, и я создал много, прежде чем, тем не менее, не используя обещания, и у меня возникла проблема. Когда я назову свое обещание, мне нужно связать свои «загруженные файлы», чтобы сказать объект данных формы aka data.append('xls', e.dataTransfer.files[0]) в коде ниже, однако у меня нет доступа к событию e, поэтому я не могу получить к нему доступ и привязать его к форма data объект.async POST-запрос с использованием Promises

Ошибка - 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>

источник

2016-01-04 Jordan Davis

У вас есть ошибка синтаксиса. –

Добавляет 'files' как свойство' executor', вместо 'e.dataTransfer.files', вместо' e.dataTransfer.files', вместо 'e.dataTransfer.files', перед вызовом работы исполнителя? – traktor53

@ Traktor53, похоже, что он будет работать плохо. –

Основной проблемой является передать параметр, полученный из объекта события, функции исполнителя обещание, отметив, исполнитель называется синхронно конструктором Promise.

Одним из способов может быть создание фабричной функции-исполнителя, которая удерживала параметр в закрытии, но это может быть чрезмерным, если сохранить значение параметра файла, в котором исполнитель может получить к нему доступ, должен работать одинаково хорошо. Установка свойства, скажем, функция загрузки объекта, что-то вроде:

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); 
. . .

источник

2016-01-04 22:58:14 traktor53

async POST-запрос с использованием Promises

ответ

Смежные вопросы