Bercakap tentang sejarah pembangunan kemahiran JavaScript functions_javascript asynchronous

Bahasa asing "The Evolution of Asynchronous JavaScript" menyusun sejarah pembangunan fungsi tak segerak JavaScript Mula-mula, fungsi tak segerak direalisasikan melalui fungsi panggil balik, dan kemudiannya melalui fungsi Promise/A dan penjana menjadi fungsi async. Terima kasih kepada Jingzhuang kerana menterjemah artikel ini, kandungannya adalah seperti berikut:

Sekarang mari kita semak perkembangan fungsi tak segerak JavaScript selama ini.

Fungsi panggil balik Panggilan Balik

Nampaknya segala-galanya harus bermula daripada fungsi panggil balik.

JavaScript Tak Segerak

Seperti yang kita ketahui, dalam JavaScript, pengaturcaraan tak segerak hanya boleh dilakukan melalui fungsi warga kelas pertama dalam bahasa JavaScript: cara ini bermakna kita boleh lulus satu fungsi sebagai parameter fungsi lain, dalam fungsi ini Fungsi yang diluluskan dalam boleh dipanggil di dalam fungsi (iaitu, fungsi panggil balik). Inilah sebabnya mengapa fungsi panggil balik dilahirkan: jika anda menghantar fungsi sebagai parameter kepada fungsi lain (pada masa ini ia dipanggil fungsi tertib lebih tinggi), kemudian di dalam fungsi, anda boleh memanggil fungsi ini untuk menyelesaikan tugas yang sepadan. Fungsi panggil balik tidak mempunyai nilai pulangan (jangan tergoda untuk menggunakan pulangan) dan hanya digunakan untuk melakukan tindakan tertentu dalam fungsi. Lihat contoh:

Something.save(function(err) {  
 if (err) { 
  //error handling 
  return; // 没有返回值 
 } 
 console.log('success'); 
}); 

Dalam contoh di atas, kami menunjukkan fungsi panggil balik ralat-pertama (panggil balik ralat-pertama), yang juga merupakan salah satu ciri Node.js itu sendiri. Semua modul teras dalam Node.js dan kebanyakan modul dalam repositori NPM Ciri ini akan diikuti semasa menulis.

Cabaran dalam menggunakan fungsi panggil balik secara berlebihan:

Jika anda tidak dapat menyusun kod dengan munasabah, sangat mudah untuk menyebabkan panggilan balik neraka (neraka panggilan balik), yang akan menjadikan kod anda sukar untuk difahami oleh orang lain.
Mudah terlepas kod pengendalian ralat.

Pernyataan pulangan tidak boleh digunakan untuk mengembalikan nilai dan kata kunci lempar tidak boleh digunakan.

Atas sebab inilah dalam dunia JavaScript, kami sentiasa mencari penyelesaian yang boleh dilaksanakan yang boleh menjadikan pembangunan JavaScript tak segerak lebih mudah.

Salah satu penyelesaian yang mungkin ialah modul async. Jika anda telah lama berurusan dengan fungsi panggil balik, anda mungkin mempunyai pemahaman yang mendalam bahawa dalam JavaScript, jika anda ingin membuat sesuatu dilaksanakan secara selari, atau secara bersiri, atau bahkan menggunakan fungsi tak segerak untuk memetakan sesuatu dalam tatasusunan Seberapa kompleks ialah elemen yang menggunakan fungsi async. Jadi, terima kasih kepada Caolan McMahon kerana menulis modul async untuk menyelesaikan masalah ini.

Menggunakan modul async, anda boleh menulis kod dengan mudah dengan cara ini:

async.map([1, 2, 3], AsyncSquaringLibrary.square,  
 function(err, result){ 
 // result will be [1, 4, 9] 
}); 

Walaupun modul async membawa kemudahan pada tahap tertentu, ia masih tidak cukup mudah dan kodnya tidak mudah dibaca, jadi Promise muncul.

Janji

Piawaian tak segerak JavaScript semasa bermula pada tahun 2012 dan tidak tersedia sehingga ES6 Walau bagaimanapun, istilah Promise tidak dicipta oleh komuniti JavaScript. Istilah ini berasal dari artikel yang diterbitkan oleh Daniel P.friedman pada tahun 1976.

A Promise mewakili hasil akhir operasi tak segerak.

Sekarang kami menggunakan Promise untuk menyelesaikan tugasan yang diselesaikan oleh kod gaya Promise adalah seperti berikut:

Something.save()  
 .then(function() { 
  console.log('success'); 
 }) 
 .catch(function() { 
  //error handling 
 }) 

Anda akan mendapati bahawa fungsi panggil balik juga digunakan dalam Promise. Fungsi panggil balik diluluskan dalam kedua-dua kaedah then dan catch, yang dilaksanakan apabila Promise masing-masing berpuas hati dan ditolak. Satu lagi kelebihan fungsi Promise ialah ia boleh dirantai untuk menyelesaikan satu siri tugasan. Sebagai contoh, anda boleh menulis kod seperti ini:

saveSomething()  
 .then(updateOtherthing) 
 .then(deleteStuff)  
 .then(logResults); 

Apabila anda tidak mempunyai Promise yang sudah siap, anda mungkin perlu menggunakan beberapa perpustakaan Promise Pilihan yang popular ialah menggunakan bluebird. Pustaka ini mungkin menyediakan lebih banyak fungsi daripada penyelesaian asli dan tidak terhad kepada ciri yang ditentukan oleh standard Promise/A.

Tetapi kenapa anda tidak menggunakan kaedah gula? Adalah disyorkan bahawa anda terlebih dahulu membaca artikel Janji: Masalah Sambungan. Untuk mendapatkan maklumat lanjut tentang Promise, sila rujuk kepada standard Promise/A.

Anda mungkin bertanya: Jika kebanyakan perpustakaan hanya mendedahkan antara muka panggil balik, maka bagaimanakah saya harus menggunakan Promise?

Nah, ini sangat mudah. ​​Satu-satunya perkara yang perlu anda lakukan pada masa ini ialah menggunakan Promise untuk membalut badan panggilan fungsi yang mengandungi panggilan balik. Contohnya:

Kod gaya panggil balik mungkin kelihatan seperti ini:

function saveToTheDb(value) { 
  db.values.insert(value, function (err, user) { 
    if (err) throw err; 
 
    // todo: insert user to db 
  }); 
} 

Kini kami menukarnya kepada kod yang menyokong panggilan gaya Promise:

function saveToTheDb(value) {  
  return new Promise(function(resolve, reject) { 
    db.values.insert(value, function(err, user) { // remember error first ;) 
      if (err) { 
        return reject(err); // don't forget to return here 
      } 
      resolve(user); 
    }) 
  } 
} 

Sebilangan besar perpustakaan atau rangka kerja sudah menyokong kedua-dua kaedah, iaitu, mereka menyediakan antara muka API gaya panggil balik dan gaya Promise. Jadi sekarang, jika anda juga ingin menyediakan perpustakaan kepada dunia luar, amalan terbaik ialah menyediakan kedua-dua antara muka pada masa yang sama. Anda boleh menggunakan kaedah berikut dengan mudah untuk mencapai tujuan ini:

function foo(cb) {  
 if (cb) { 
  return cb(); 
 } 
 return new Promise(function (resolve, reject) { 
 
 }); 
} 

或者更简单些，你可以从只提供Promise风格的接口开始后，并使用诸如 callbackify这样的工具来达到向后兼容的目的。其实Callbackify所做的工作和上面的代码片段类似，但在实现上使用了一个更通用的方法， 我建议你可以去阅读Callbackify的源代码。

生成器Generators/ yield

JavaScript 生成器是个相对较新的概念， 它是ES6（也被称为ES2015）的新特性。想象下面这样的一个场景：

当你在执行一个函数的时候，你可以在某个点暂停函数的执行，并且做一些其他工作，然后再返回这个函数继续执行， 甚至是携带一些新的值，然后继续执行。
上面描述的场景正是JavaScript生成器函数所致力于解决的问题。当我们调用一个生成器函数的时候，它并不会立即执行， 而是需要我们手动的去执行迭代操作（next方法）。也就是说，你调用生成器函数，它会返回给你一个迭代器。迭代器会遍历每个中断点。

function* foo () {  
 var index = 0; 
 while (index < 2) { 
  yield index++; //暂停函数执行，并执行yield后的操作 
 } 
} 
var bar = foo(); // 返回的其实是一个迭代器 
console.log(bar.next());  // { value: 0, done: false }  
console.log(bar.next());  // { value: 1, done: false }  
console.log(bar.next());  // { value: undefined, done: true } 

更进一步的，如果你想更轻松的使用生成器函数来编写异步JavaScript代码，我们可以使用 co 这个库，co是著名的tj大神写的。

Co是一个为Node.js和浏览器打造的基于生成器的流程控制工具，借助于Promise，你可以使用更加优雅的方式编写非阻塞代码。
使用co，前面的示例代码，我们可以使用下面的代码来改写：

co(function* (){  
 yield Something.save(); 
}).then(function() { 
 // success 
}) 
.catch(function(err) { 
 //error handling 
}); 

你可能会问：如何实现并行操作呢？答案可能比你想象的简单，如下（其实它就是Promise.all而已）：

yield [Something.save(), Otherthing.save()];  
Async/ await

在ES7（还未正式标准化）中引入了Async函数的概念，目前如果你想要使用的话，只能借助于babel 这样的语法转换器将其转为ES5代码。（提醒一点：我们现在讨论的是async关键字，而不是NPM中的async包）。

简而言之，使用async关键字，你可以轻松地达成之前使用生成器和co函数所做到的工作。当然，除了hack之外。

也许你会问，是否在ES7中有了async关键字，yield就变得不是那么重要了？

实际上，使用yield实现异步也不过是一种hack罢了，yield意味着懒次序（lazy sequences）和迭代器。 而await能够完美的分离这两点，首先让yield用于其最初的目的，其次使用await来执行异步操作。

在这背后，async函数实际使用的是Promise，也就是为什么async函数会返回一个Promise的原因。

因此，我们使用async函数来完成类似于前面代码所完成的工作，可以使用下面这样的方式来重新编写代码：

async function save(Something) {  
 try { 
  await Something.save(); // 等待await后面的代码执行完，类似于yield 
 } catch (ex) { 
  //error handling 
 } 
 console.log('success'); 
} 

正如你看到的那样，使用async函数，你需要在函数声明的最前面加上async关键字。这之后，你可以在函数内部使用await关键字了，作用和之前的yield作用是类似的。

使用async函数完成并行任务与yiled的方式非常的相似，唯一不同的是，此时Promise.all不再是隐式的，你需要显示的调用它：

async function save(Something) {  
  await Promise.all[Something.save(), Otherthing.save()] 
} 

Koa也支持async函数，如果你也在使用koa，那么你现在就可以借助babel使用这一特性了。

import koa from koa;  
let app = koa(); 
app.experimental = true; 
app.use(async function (){  
  this.body = await Promise.resolve('Hello Reader!') 
}) 
app.listen(3000);  

以上内容给大家分享了JavaScript异步函数发展历程，希望对大家有所帮助。