es6學(xué)習(xí)筆記之Async函數(shù)的使用示例
前言
異步操作是 JavaScript 編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個(gè)問題。
從最早的回調(diào)函數(shù),到 Promise 對(duì)象,再到 Generator 函數(shù),每次都有所改進(jìn),但又讓人覺得不徹底。它們都有額外的復(fù)雜性,都需要理解抽象的底層運(yùn)行機(jī)制。
異步I/O不就是讀取一個(gè)文件嗎,干嘛要搞得這么復(fù)雜?異步編程的最高境界,就是根本不用關(guān)心它是不是異步。
async 函數(shù)就是隧道盡頭的亮光,很多人認(rèn)為它是異步操作的終極解決方案。下面就來看看關(guān)于async函數(shù)的兩個(gè)栗子:
栗子一:從豆瓣 API 獲取數(shù)據(jù)
var fetchDoubanApi = function() { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { var response; try { response = JSON.parse(xhr.responseText); } catch (e) { reject(e); } if (response) { resolve(response, xhr.status, xhr); } } else { reject(xhr); } } }; xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true); xhr.setRequestHeader("Content-Type", "text/plain"); xhr.send(data); }); }; (async function() { try { let result = await fetchDoubanApi(); console.log(result); } catch (e) { console.log(e); } })();
栗子二:根據(jù)電影文件名,自動(dòng)下載對(duì)應(yīng)的海報(bào)
import fs from 'fs'; import path from 'path'; import request from 'request'; var movieDir = __dirname + '/movies', exts = ['.mkv', '.avi', '.mp4', '.rm', '.rmvb', '.wmv']; // 讀取文件列表 var readFiles = function () { return new Promise(function (resolve, reject) { fs.readdir(movieDir, function (err, files) { resolve(files.filter((v) => exts.includes(path.parse(v).ext))); }); }); }; // 獲取海報(bào) var getPoster = function (movieName) { let url = `https://api.douban.com/v2/movie/search?q=${encodeURI(movieName)}`; return new Promise(function (resolve, reject) { request({url: url, json: true}, function (error, response, body) { if (error) return reject(error); resolve(body.subjects[0].images.large); }) }); }; // 保存海報(bào) var savePoster = function (movieName, url) { request.get(url).pipe(fs.createWriteStream(path.join(movieDir, movieName + '.jpg'))); }; (async () => { let files = await readFiles(); // await只能使用在原生語法 for (var file of files) { let name = path.parse(file).name; console.log(`正在獲取【${name}】的海報(bào)`); savePoster(name, await getPoster(name)); } console.log('=== 獲取海報(bào)完成 ==='); })();
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
12個(gè)提高JavaScript技能的概念(小結(jié))
這篇文章主要介紹了12個(gè)提高JavaScript技能的概念(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Echarts基本用法,詳解的介紹了Echarts的基本用法和實(shí)例,有興趣的可以了解一下2017-08-08解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12詳解微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)
最近在小程序的開發(fā)過程中,需要用到雙向綁定,遇到報(bào)錯(cuò)才知道微信本身是不支持對(duì)象雙向綁定的,鏖戰(zhàn)一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-05-05JavaScript使用canvas實(shí)現(xiàn)flappy bird全流程詳解
這篇文章主要介紹了JavaScript使用canvas實(shí)現(xiàn)flappy bird流程,canvas是HTML5提供的一種新標(biāo)簽,它可以支持JavaScript在上面繪畫,控制每一個(gè)像素,它經(jīng)常被用來制作小游戲,接下來我將用它來模仿制作一款叫flappy bird的小游戲2023-03-03