一次性掌握ES6/ES7異步處理

tracymac7 發布于2019-08-26 12:24 / 1335人閱讀

摘要：一次性掌握異步處理假定一個場景，等女朋友睡起來出去逛街，超過就不等了，自己打游戲了處理方式寫法鏈式調用方法，只有當異步處理成功后回到用拿到異步處理成功后的數據異步處理出錯時，會調用獲取到異常也就是說方法里有兩個回調函數作為參數或者還有第二種

一次性掌握ES6/ES7異步處理

假定一個場景，等女朋友睡起來出去逛街，超過5s就不等了，自己打游戲了 ...

ES6 Promise 處理方式

promise 寫法
promise鏈式調用方法，只有當異步處理成功后回到用.then(data => {}) 拿到異步處理成功后的數據
異步處理出錯時，會調用.then(err => {}) 獲取到異常
也就是說.then( data => {}, err => {}) 方法里有兩個回調函數作為參數
或者還有第二種寫法.then(data => {}).catch(err => {})

function waiting (ms) {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject("long time")
        } else {
            setTimeout(() => {
                resolve(ms);
            }, ms)
        }
    })
}


function main () {
    waiting(3000).then( success => {
        console.log(success);
    }, err => {
        console.log(err)
    })
}

// 或者
function main() {
    waiting(3000).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err);
    })
}

ES7 Async/Await 處理方式

async 表明這個函數里面有異步操作，await總是寫在async聲明的函數中的
遇到awit，函數就會停止執行，等待異步操作結束，再執行后面的語句
異步操作獲取的結果即為resolve回調函數的參數返回
異常即通過reject回調函數參數獲取
注意，捕獲異常時，我們往往需要在async函數體中使用 try catch 方式獲取異常

let sleep = ms => {
    return new Promise ( (resolve, reject) => {
        if(ms > 5000) {
            reject("long time")
        } else {
            setTimeout(function() {
                resolve(ms)
            } ,ms)
        }
    })
}

let play = (ms) => {
    console.log(`I wait you ${ms} s`)
}

let main = async () => {
    try{
        let result = await sleep(3000);
        play(result)
    } catch (err) {
        throw err
    }
}

注意：await等的是什么?是promise是承諾返回的是resolve回調函數里面的數據

更多用法可以參考：Promise && Async/Await

云服務器 GPU云服務器異步處理 asp 異步處理 js寫成異步處理 php 處理異步化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108628.html

ES6

摘要：對象可被不定參數和默認參數完美代替。將對象納入規范，提供了原生的對象。規定，命令和命令聲明的全局變量，屬于全局對象的屬性命令命令命令聲明的全局變量，不屬于全局對象的屬性。。這些函數表達式最適合用于非方法函數，并且它們不能用作構造函數。 ES6的了解新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數（操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值In...

snifes 2019-08-22 15:57 評論0 收藏0
從0到1使用VUE-CLI3開發實戰（三）: ES6/ES7知識儲備

摘要：它們都用于聲明變量。盲目使用替換后可能會導致預期意外的結果。有鑒于此，還是建議使用字符串，布爾和數字類型的數據類型。像使用這種下劃線命名約定在一個開源項目中，命名規則很難維持得一直很好，這樣經常會造成一些困擾。今天群里有小伙伴跟我聊天，問了我幾個關于ES6的問題，我才意識到，大部分初學者在學習的過程中，都是學了HTML/CSS/JS之后就開始上手學習框架了，而對于ES6的重視程度卻不...

crossoverJie 2019-08-23 14:48 評論0 收藏0
揭秘babel的魔法之class繼承的處理2

摘要：并且用驗證了中一系列的實質就是魔法糖的本質。抽絲剝繭我們首先看的編譯結果這是一個自執行函數，它接受一個參數就是他要繼承的父類，返回一個構造函數。如果你已經看過第一篇揭秘babel的魔法之class魔法處理，這篇將會是一個延伸；如果你還沒看過，并且也不想現在就去讀一下，單獨看這篇也沒有關系，并不存在理解上的障礙。上一篇針對Babel對ES6里面基礎class的編譯進行了分析。這一篇將...

BlackHole1 2019-08-20 13:47 評論0 收藏0