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é)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js中Object.defineProperty()方法的不詳解
這篇文章主要介紹了js中Object.defineProperty()方法的不詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法,實(shí)例分析了javascript操作頁面元素滾動(dòng)效果的方法,需要的朋友可以參考下2015-04-04
Javascript中的getter和setter初識(shí)
最近在工作中遇到了getter和setter,getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。下面這篇文章主要給大家介紹了關(guān)于Javascript中g(shù)etter和setter的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08
JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制的圓弧蕩秋千效果,以完整實(shí)例形式分析了JavaScript集合html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01
js實(shí)現(xiàn)左側(cè)網(wǎng)頁tab滑動(dòng)門效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)左側(cè)網(wǎng)頁tab滑動(dòng)門效果代碼,涉及JavaScript頁面元素的遍歷及元素屬性動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript或jQuery 獲取option value值方法解析
這篇文章主要介紹了JavaScript或jQuery 獲取option value值方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
javascript如何在foreach循環(huán)完成之后執(zhí)行一個(gè)回調(diào)函數(shù)
forEach()是前端開發(fā)中操作數(shù)組的一種方法,主要功能是遍歷數(shù)組,其實(shí)就是 for 循環(huán)的升級(jí)版,下面這篇文章主要給大家介紹了關(guān)于javascript如何在foreach循環(huán)完成之后執(zhí)行一個(gè)回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2023-11-11

