es6學(xué)習(xí)筆記之Async函數(shù)的使用示例
前言
異步操作是 JavaScript 編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個(gè)問(wèn)題。
從最早的回調(diào)函數(shù),到 Promise 對(duì)象,再到 Generator 函數(shù),每次都有所改進(jìn),但又讓人覺(jué)得不徹底。它們都有額外的復(fù)雜性,都需要理解抽象的底層運(yùn)行機(jī)制。
異步I/O不就是讀取一個(gè)文件嗎,干嘛要搞得這么復(fù)雜?異步編程的最高境界,就是根本不用關(guān)心它是不是異步。
async 函數(shù)就是隧道盡頭的亮光,很多人認(rèn)為它是異步操作的終極解決方案。下面就來(lái)看看關(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只能使用在原生語(yǔ)法
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é)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
12個(gè)提高JavaScript技能的概念(小結(jié))
這篇文章主要介紹了12個(gè)提高JavaScript技能的概念(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Echarts基本用法,詳解的介紹了Echarts的基本用法和實(shí)例,有興趣的可以了解一下2017-08-08
解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
詳解微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)
最近在小程序的開(kāi)發(fā)過(guò)程中,需要用到雙向綁定,遇到報(bào)錯(cuò)才知道微信本身是不支持對(duì)象雙向綁定的,鏖戰(zhàn)一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-05-05
JavaScript使用canvas實(shí)現(xiàn)flappy bird全流程詳解
這篇文章主要介紹了JavaScript使用canvas實(shí)現(xiàn)flappy bird流程,canvas是HTML5提供的一種新標(biāo)簽,它可以支持JavaScript在上面繪畫,控制每一個(gè)像素,它經(jīng)常被用來(lái)制作小游戲,接下來(lái)我將用它來(lái)模仿制作一款叫flappy bird的小游戲2023-03-03

