es6學(xué)習(xí)筆記之Async函數(shù)的使用示例
前言
異步操作是 JavaScript 編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個問題。
從最早的回調(diào)函數(shù),到 Promise 對象,再到 Generator 函數(shù),每次都有所改進,但又讓人覺得不徹底。它們都有額外的復(fù)雜性,都需要理解抽象的底層運行機制。
異步I/O不就是讀取一個文件嗎,干嘛要搞得這么復(fù)雜?異步編程的最高境界,就是根本不用關(guān)心它是不是異步。
async 函數(shù)就是隧道盡頭的亮光,很多人認為它是異步操作的終極解決方案。下面就來看看關(guān)于async函數(shù)的兩個栗子:
栗子一:從豆瓣 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ù)電影文件名,自動下載對應(yīng)的海報
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)));
});
});
};
// 獲取海報
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);
})
});
};
// 保存海報
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}】的海報`);
savePoster(name, await getPoster(name));
}
console.log('=== 獲取海報完成 ===');
})();
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實例
這篇文章主要介紹了JavaScript+html5 canvas繪制的圓弧蕩秋千效果,以完整實例形式分析了JavaScript集合html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01
js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼
這篇文章主要介紹了js實現(xiàn)左側(cè)網(wǎng)頁tab滑動門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動態(tài)切換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
JavaScript或jQuery 獲取option value值方法解析
這篇文章主要介紹了JavaScript或jQuery 獲取option value值方法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)
forEach()是前端開發(fā)中操作數(shù)組的一種方法,主要功能是遍歷數(shù)組,其實就是 for 循環(huán)的升級版,下面這篇文章主要給大家介紹了關(guān)于javascript如何在foreach循環(huán)完成之后執(zhí)行一個回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-11-11

