Filereader_javascript tips for using promise encapsulation under JavaScript

Promise is a good choice when dealing with asynchrony, reducing nesting levels, making code more readable, and logic clearer. ES6 adds it to the specification, JQuery 3.0 also modifies implementations to move closer to the specification (3.0 post announcements). Some of the new elements, such as. Fetch () native on the "thenable", but most of the previous APIs also rely on callbacks, at this time, we just encapsulate them, we can avoid nesting traps, enjoy the joy of Promise experience.

Promise General Usage
Let's take a look at the general usage of Promise.

Declares the Promise object
var p = new Promise (function (resolve, reject) {
 //whenever the execution then, call resolve
 settimeout (fun Ction () { 
  resolve (1);
 }, 5000);

 Or whatever the problem is, call reject
 if (somethingwrong) {
  reject (' 2 ');
 }   
});
  
Use the Promise object
p.then (function (num) {
 //corresponds to the above resolve
 console.log (num);//1
}, function (num) {
   //corresponds to the above reject
 console.log (num);//2
});

The Promise drive model is not complex: any operation, assuming it has only two results, succeeds or fails. Then just call the appropriate program at the right time, and go to the appropriate next step. Then () as the name suggests, is the meaning of the following, when the previous Promise has the result-that is, call resolve or reject--, then start the corresponding processing function.

The Promise instance is created and then executed, and the results are determined by ourselves, such as successful loading, or satisfying a condition, and so on. by concatenating. Then (), you can complete a series of actions. Each call to. Then () creates a new Promise instance that silently waits for the previous instance state to change before it starts execution.

Encapsulation FileReader
next start the encapsulation. The idea is very simple, filereader in addition to provide a variety of read methods, there are several event hooks, where onerror and onload can clearly be used as the basis for judging whether the task is completed. If the load succeeds, you need to use the contents of the file, so it is necessary to pass the file or file contents to the next step.

The last code to complete is as follows:

function reader (file, options) {
 options = Options | | {};
 Return to New Promise (function (resolve, reject) {let
  reader = new FileReader ();

  Reader.onload = function () {
   resolve (reader);
  Reader.onerror = Reject;

  if (options.accept &&!new RegExp (options.accept). Test (File.type)) {
   reject ({
    code:1,
    msg: ' Wrong file type '
   });

  if (!file.type | |/^text\//i.test (file.type)) {
   reader.readastext (file);
  } else {
   Reader.readasdataurl (file);
  }
 );

In order to really come in handy, there are some validation file types of operations, but not with the main thrust of this article, skip the table. The core of this code is to create a Promise object, wait for the FileReader read to complete, call the Resolve method, or call the Reject method if there is a problem.

Using the function that you just encapsulated.
you can then use it in your project:

Reader (file)
 . Then (function (reader) {
  console.log (reader.result);
 })
 . catch (function (error) {
  console.log (error);
 });

. then () supports two parameters, the first is started when Promise succeeds, and the second nature starts on failure. Use. catch () to achieve the same effect. The benefits of Promise, in addition to better readability, the returned Promise object can also be arbitrary transmission, continue to carry out chain calls, there is a lot of imagination space.

Continue. Then ()
So we might as well in series more operations (originally wanted to write a breakpoint to continue to pass, later to say):

Select all copies into the note reader (file)

 . then (function (reader) {return
  new Promise (function (resolve, reject) {
   //Just pause for 5 seconds
   ... settimeout (function () {
    resolve (Reader.result); 
   }, 5000);
  });
 Then (function (content) {
  console.log (content);
 });

The above is the entire content of this article, I hope to help you learn.