生成器函數

簡單使用：

// 生成器就是一個特殊的函數// 異步編程 純回調函數 node gs ajax mongodbfunction* gen() {// console.log(111);yield '一只沒有耳朵';// console.log(222);yield '一只沒有尾巴';// console.log(333);yield '真奇怪';// console.log(444);}let iterator = gen()console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())console.log(iterator.next())// 遍歷for (let v of gen()) {console.log(v)}

生成器函數參數

function* gen(arg) {console.log(arg)let one = yield 111;console.log(one)let two = yield 222;console.log(two)let three = yield 333;console.log(three)}// 執行獲取迭代器對象let iterator = gen('AAA');console.log(iterator.next())console.log(iterator.next('BBB'))console.log(iterator.next('CCC'))console.log(iterator.next('DDD'))// next 方法可以傳入形參

生成器函數實例

// 1s 控制臺輸出111， 2s輸出222， 3s 輸出333// 回調地獄// setTimeout(() => {// console.log(111)// setTimeout(() => {// console.log(222)// setTimeout(() => {// console.log(333)// },3000)// }, 2000)// }, 1000)function one() {setTimeout(() => {console.log(111)iterator.next()}, 1000)}function two() {setTimeout(() => {console.log(222)iterator.next()}, 1000)}function three() {setTimeout(() => {console.log(333)}, 1000)}function* gen() {yield one();yield two();yield three();}// 調用生成器函數let iterator = gen()iterator.next()

生成器函數實例2：

// 模擬獲取 用戶數據 訂單數據 商品數據function getUsers() {setTimeout(() => {let data = '用戶數據'// 調用next 方法 ,并且data傳入iterator.next(data)}, 1000)}function getOrders() {setTimeout(() => {let data = '訂單數據'iterator.next(data)}, 1000)}function getGoods() {setTimeout(() => {let data = '商品數據'iterator.next(data)}, 1000)}// 聲明生成器函數function* gen() {let users = yield getUsers();console.log(users)let orders = yield getOrders();console.log(orders)let goods = yield getGoods();console.log(goods)}// 調用生成器函數let iterator = gen();iterator.next()

?

?

Promise的使用

Promise的基本認識

promise有三種狀態：pending/reslove/reject 。pending就是未決，resolve可以理解為成功，reject可以理解為拒絕。

// Promise 是ES6引入的異步編程的新解決方案,語法上promise是一個構造函數,用來封裝異步操作并可以獲取其成功或失敗的結果// 1 Promise 構造函數: Promise(excutor){}// 2 Promise.prototype.then 方法// 3 Promise.prototype.catch 方法// 實例化Promise對象const p = new Promise(function (resolve, reject) {setTimeout(function () {// 調用成功的函數let data = '數據庫中的用戶數據'resolve(data)// 調用失敗的函數// let err = '數據讀取失敗'// reject(err)}, 1000)})// 調用 promise 對象的 then 方法p.then(function (v) {console.log(v)}, function (v) {console.log(v)})

Promise的then方法

// 創建Promise對象const p = new Promise(function (resolve, reject) {setTimeout(() => {resolve('用戶數據')}, 1000)})//調用then方法 then方法的返回結果是Promise，對象的狀態由回調函數的執行結果決定// 1.如果回調函數中的返回結果是非Promise類型的屬性，狀態為成功，返回值為對象的成功值const result = p.then(function (v) {console.log(v)// 1 非promise 類型的屬性// return 123// 2 是Promise 對象// return new Promise(function (resolve, reject) {// resolve('OK')// reject('error')// })// 3 拋出錯誤throw new Error('出錯啦')}, function (reason) {console.warn(reason)})console.log(result)// 鏈式調用P.then(v => { }).then(v => { })

promise的catch方法

const p = new Promise(function (resolve, reject) {setTimeout(() => {// 設置p對象的狀態為失敗，并設置失敗的值reject('出錯啦！')}, 1000)})// catch相當于 語法糖（因為只用then一樣可以實現）p.catch(function (reason) {console.log(reason)})

promise封裝ajax

const p = new Promise(function (resolve, reject) {// 1,創建對象const xhr = new XMLHttpRequest();// 2 初始化xhr.open('get', 'https://api.apiopen.top/getJoke');// 3 發送xhr.send();// 4 綁定事件，處理相應結果xhr.onreadystatechange = function () {// 判斷if (xhr.readState === 4) {// 判斷響應碼if (xhr.status >= 200 && xhr.status < 300) {// 表示成功resolve(xhr.response)} else {// 如果失敗reject(xhr.status)}}}})p.then(function (v) {console.log(v)}, function (reason) {console.log(reason)})

promis 讀取多個文件

const p = new Promise(function (resolve, reject) {fs.readFile('./鋤禾.md', (err, data) => {resolve(data)})})p.then(value => {return new Promise((resolve, reject) => {fs.readFile('./插秧.md', (err, data) => {resolve([value, data])})})}).then(value => {return new Promise((resolve, reject) => {fs.readFile('./觀書有感.md', (err, data) => {// 壓入resolve(value.push(data))})})}).then(value => {ocnsole.log(value.join('\r\n'))})

promise.all&&promise.allSettled

// 聲明兩個promise對象const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('數據1')}, 1000)})const p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('shibai')}, 1000)})//調用allsettled 方法 ,即使有一個失敗也會返回成功// const result = Promise.allSettled([p1, p2]);// console.log(result)// all 只要有一個失敗就返回失敗的回調，如果全部成功，則返回一個只有數據的數組const res = Promise.all([p1, p2]);console.log(res)

?

?

async和await

async 函數返回一個 Promise 對象，可以使用 then 方法添加回調函數。

async function eg() {return '我是一個字符串'}console.log(eg()) // Promise?{<fulfilled>: "我是一個字符串"}eg().then(v => {console.log(v); // 我是一個字符串})

?

?await

? ? 正常情況下，await 命令后面是一個 Promise 對象，它也可以跟其他值，如字符串，布爾值，數值以及普通函數。

? ? async 函數中可能會有 await 表達式，async 函數執行時，如果遇到 await 就會先暫停執行 ，等到觸發的異步操作完成后，恢復 async 函數的執行并返回解析值。
? ? await 關鍵字僅在 async function 中有效。如果在 async function 函數體外使用 await ，你只會得到一個語法錯誤。

? ? await針對所跟不同表達式的處理方式：

• ? ?? Promise 對象：await 會暫停執行，等待 Promise 對象 resolve，然后恢復 async 函數的執行并返回解析值。
• ? ? ?非 Promise 對象：直接返回對應的值。

function time() {return new Promise((resolve, reject) => {setTimeout(() => { console.log('我是延遲兩秒后出現的內容'); resolve() }, 2000)})}async function eg2() {await time()console.log('我是一段正常的內容')}eg2()//我是延遲兩秒后出現的內容//我是一段正常的內容

?

總結

以上是生活随笔為你收集整理的es6 Promise,生成器函数，async的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。