(精華)2020年7月5日 JavaScript高階篇 ES6(Promise)

愚公搬程式碼發表於2020-07-05
JavaScriptPromise

Promise 是什麼

是一種非同步解決的方案 比es5傳統的解決非同步的方案（回撥函式）
es6提供了promise物件

以前處理非同步的方式

// 後者要等待前者執行的結果 f2 要等待 f1執行完
function f1(callback){
    setTimeout(()=>{
        var res = 'f1'
        console.log('我先執行從後臺獲取到了f1');
        callback(res)
    },1000)
}
function f2(value){
    console.log(value);
}

f1(f2)

基本用法

const promise = new Promise(function(resolve,reject){
    setTimeout(()=>{
        var flag = false;
        flag ? resolve('成功') : reject('失敗')
    },1000)
})

promise.then(
    (res)=>{console.log(res)},
    (res)=>{console.log(res);
    }

)

會立即執行的

// promise新建後會立即執行
const promise = new Promise(function(resolve,reject){
    console.log('promise');
    resolve()
})

promise.then(function(){
    console.log('resolve');
})

console.log('hello');

配合原生的ajax實現案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>peomise案例</title>
</head>

<body>
    <script>
        const getJson = function (url) {
            return new Promise(function (reslove, reject) {
                const handel = function () {
                    // 能不能想到一個關鍵數字
                    if (this.readyState !== 4) {
                        return
                    }
                    if (this.status === 200) {
                        // 成功的結果
                        reslove(this.response)
                    } else {
                        // 失敗的結果
                        reject(new Error(this.statusText))
                    }
                }
                const client = new XMLHttpRequest()
                client.open("GET", url)
                client.onreadystatechange = handel
                client.responseType = 'json'
                client.setRequestHeader('Accept', 'application/json')
                client.send()
            })
        }
        getJson(`http://127.0.0.1:2000/name`).then(
            // 成功的
            // 拿到結果後爸第一項的id傳遞給後臺 後臺根據id返回對應的 人物武器的名字
            (res) => {
                console.log(res);
                const id = res.data[2].id
                return getJson(`http://127.0.0.1:2000/wepon?id=${id}`)
            }
        ).then((res) => {
            console.log(res)
        })
    </script>
</body>

</html>

Promise.then()

.then方法是定義在原型上的 Promise.prototype
.then之後會返回一個新的promise物件

Promise.catch()

// promise 會吃掉錯誤
// 建議用到promise的時候後面一般加上catch捕捉
const say = function(){
    return new Promise(function(resolve,reject){
        resolve(v+2)
    })
}
say().then(()=>{
    console.log('我是處理後的');
    
}).catch(
    (error)=>{
    console.log(error)
    return '123'
    }
).then((res)=>{
    console.log(res);
})

Promise.all()

// Promise.all 
// 一次性處理多個promise 生成一個新的promise
// Promise.all(p1,p2)
let promise1 = new Promise(function(resolve,reject){
    // resolve('promise11')
    reject('promise11')
})
let promise2 = new Promise(function(resolve){
    resolve('promise22')
})
Promise.all([promise1,promise2]).then(function(res){
    console.log(res);
}).catch((res)=>{console.log(res);
})

相關文章