Promise 介紹 Promise 是一個構造函數，是非同步編程的一種解決方案。所謂Promse,它本身就是一個容器，裡面保存著非同步操作的結果，對的，這和回調函數類似。 Promise 容器本身不是非同步的，而裡面封裝一個非同步任務。他有三種狀態，即：1.pending(進行中)、2.resolved( ...
Promise 介紹
Promise 是一個構造函數，是非同步編程的一種解決方案。所謂Promse,它本身就是一個容器，裡面保存著非同步操作的結果，對的，這和回調函數類似。
Promise 容器本身不是非同步的，而裡面封裝一個非同步任務。他有三種狀態，即：1.pending(進行中)、2.resolved(成功)、3.rejected(失敗)。狀態只能變為一種。
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);
})
顯然，上面這個例子顯得特別麻煩！
選擇，讓我們封裝 Promise
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文件：
{ "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>
