Promise介紹及使用場景

時間 2019-11-12

標籤 promise 介紹使用場景简体版

原文原文鏈接

Promise 介紹

　　Promise 是一個構造函數，是異步編程的一種解決方案。所謂Promse,它自己就是一個容器，裏面保存着異步操做的結果，對的，這和回調函數相似。javascript

　　Promise 容器自己不是異步的，而裏面封裝一個異步任務。他有三種狀態，即：1.pending(進行中)、2.resolved(成功)、3.rejected(失敗)。狀態只能變爲一種。html

Promise 獲取文件信息　　

const fs = require('fs');

let p1 = new Promise((resolve, reject) => {
    fs.readFile('./data/a.txt', 'utf8', (error, data) => {
        if (error) {
            reject(error);
        } else {
            resolve(data);
        }
    });
});

let p2 = new Promise((resolve, reject) => {
    fs.readFile('./data/b.txt', 'utf8', (error, data) => {
        if (error) {
            reject(error);
        } else {
            resolve(data);
        }
    });
});

let p3 = new Promise((resolve, reject) => {
    fs.readFile('./data/c.txt', 'utf8', (error, data) => {
        if (error) {
            reject(error);
        } else {
            resolve(data);
        }
    });
});

// then 的鏈式編程
p1
    .then(data => {
        console.log('a的數據', data);
        // 當 p1 讀取成功的時候
        // 當前函數中 return 的結果就是後面的 then 中 Function 接收到
        // 當你 return 123 後面就接收到 123
        // 沒有 return,後面接收到的就是 undefined
        // 上面那些 return 的數據沒什麼軟用
        // 真正有用的事，return 一個 Promise 對象
        // 當 return 一個 Promise 對象的時候，後續的 then 中的方法的第一個參數會做爲 這個對象的結果
        return p2;
    }, error => {
        console.log('讀取文件a失敗了', error);
    })
    .then(data => {
        console.log('b的數據', data);
        return p3;
    }, error => {
        console.log('讀取文件b失敗了', error);
    })
    .then(data => {
        console.log('c的數據', data);
    }, error => {
        console.log('讀取文件c失敗了', error);
    })

顯然，上面這個例子顯得特別麻煩！java

選擇，讓咱們封裝 Promise node

const fs = require('fs');

const pReadFile = (filePath) => {
    return new Promise((resolve, reject) => {
        fs.readFile(filePath, 'utf8', (error, data) => {
            if (error) {
                reject(error);
            } else {
                resolve(data);
            }
        });
    });
};

pReadFile('./data/a.txt')
    .then(data => {
        console.log('a文件數據: ', data);
        return pReadFile('./data/b.txt');
    })
    .then(data => {
        console.log('b文件數據: ', data);
        return pReadFile('./data/c.txt');
    })
    .then(data => {
        console.log('c文件數據: ', data);
    });

Promise 配合 AJAX 獲取信息

data.json文件：jquery

{
    "users": [
        {
            "id": 1,
            "username": "admin-1",
            "age": 18,
            "job": 2
        },
        {
            "id": 2,
            "username": "admin-2",
            "age": 18,
            "job": 4
        },
        {
            "id": 3,
            "username": "admin-3",
            "age": 18,
            "job": 5
        }
    ],
    "jobs": [
        {
            "id": 1,
            "name": "學生"
        },
        {
            "id": 2,
            "name": "老師"
        },
        {
            "id": 3,
            "name": "司機"
        },
        {
            "id": 4,
            "name": "演員"
        },
        {
            "id": 5,
            "name": "工程師"
        },
        {
            "id": 6,
            "name": "程序員"
        }
    ]
}

代碼：程序員

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>獨秀不愛秀</title>
</head>
<body>
    <form id="user-form"></form>
    <script type="text/html" id="tpl">
        <div>
            <label for="">用戶名</label>
            <input type="text" value="{{ user.username }}">
        </div>
        <div>
            <label for="">年齡</label>
            <input type="number" value="{{ user.age }}">
        </div>
        <div>
            <label for="">職業</label>
            <select name="" id="">
            {{ each jobs }}
                {{ if user.job === $value.id }}
                    <option value="{{ $value.id }}" selected>{{ $value.name}}</option>
                {{ else }}
                    <option value="{{ $value.id }}">{{ $value.name}}</option>
                {{ /if }}
            {{ /each }}
            </select>
        </div>
    </script>
    <script src="node_modules/art-template/lib/template-web.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        /**
         * 既能夠實現 callback 獲取
         * 也能夠實現 .then 方式獲取
        */
        const pGet = (url, callback) => {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.onload = () => {
                    resolve(JSON.parse(xhr.responseText));
                    callback && callback(JSON.parse(xhr.responseText));
                }
                xhr.onerror = (error) => reject(error);
                xhr.open('get', url);
                xhr.send();
            });
        };
            
        let currentData = {};
        pGet('./data.json')
            .then((data) => {
                currentData.user = data.users[0];
                return data.jobs;
            })
            .then((jobsData) => {
                currentData.jobs = jobsData;
                let htmlStr = template('tpl', currentData);
                document.getElementById('user-form').innerHTML = htmlStr;
            });

    </script>
</body>
</html>

1. Memcache介紹及使用場景
2. RabbitMQ使用場景介紹
3. 支付及場景介紹
4. React Hooks介紹及應用場景
5. mycat的介紹及應用場景
6. es6 let介紹及應用場景
7. redis基本介紹及應用場景
8. NoSQL類型介紹及適用場景
9. node.js介紹及應用場景
10. Promise應用場景
更多相關文章...
• TiDB數據庫的應用場景 - NoSQL教程
• 網站主機介紹 - 網站主機教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Composer 安裝與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。