Detailed explanation of asynchronous processing examples in WeChat applet (async/await)

Y2J
Release: 2017-04-28 12:00:41
Original
6268 people have browsed it

I have tried both Promise and co, but finally I couldn’t help but come up with the ultimate solution for ES7: async/await.

async/await is also used in conjunction with Promise. Let’s take a look at the sample code first. This usage is very similar to the co usage we talked about before:

function myAsyncFunc() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log("myAsyncFunction done!");
      resolve({data: "Hello,World"});
    }, 5000);
  });
}

async function test() {
  var result = await myAsyncFunc();
  console.log(result.data); //Hello,World
}

test();
Copy after login

To be used in a small program If you use async/await, it is not enough to rely on the Babel conversion tool in WeChat web developer tools, because some additional Babel plug-ins are needed to compile the code using async/await. So this time we have to write our own script to call Babel.

In the project, we have to turn off the "Turn on ES6 to ES5" option first, because we now have to do this ourselves.

Detailed explanation of asynchronous processing examples in WeChat applet (async/await)

Turn off the option

Then, I am going to use Gulp to write my script and call Babel from Gulp to compile my code. Of course, you can also use your other tools such as Grunt, Webpack, etc. You can refer here to learn how to use Babel in the build tool you use.

The important point is that when we call Babel, we need to configure plug-ins for our Babel to support async/await, such as async-to-generator, async-generator-functions and other plug-ins. For convenience, use the preset directly (that is, the officially configured plug-in package). One of the two presets, es2017 or latest, can meet our needs.

This is Babel’s configuration file: .babelrc

{  
  "presets": [ "latest" ],  
  "plugins": []
}
Copy after login

Then in my gulpfile.js, I will compile all js files under my mini program project through Babel:

gulp.task('scripts', () => {  
  return gulp.src('./src/**/*.js')    
    .pipe(babel())
    .pipe(gulp.dest('./dist'))
})
Copy after login

Okay, this is what we have to do to compile our code. Next, let’s talk about some changes to be made in the mini program code:

1. Introduce the generator support library

The code translated by Babel will pass the aysnc/await function It is implemented in a way similar to the co library, that is, using a generator. Therefore, just like when we use co, we need to rely on a regeneratorRuntime to support the generator feature. We can use Facebook's open source regenerator library. You can download this regenerator library through npm:

npm install regenerator
Copy after login

Then take out the file named regenerator-runtime.js in the downloaded file and put it into our applet code.

2. Introduce code

Introduce the regenerator library into the code file that needs to use the async/await feature:

const regeneratorRuntime = require('../../libs/regenerator-runtime')
Copy after login

Then, you can rest assured in your code Here we use async/await to write asynchronous processing.

The above is the detailed content of Detailed explanation of asynchronous processing examples in WeChat applet (async/await). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template