約束する
地獄のコールバック(コールバック地獄)
- callbackhell.js
var fs = require('fs')
fs.readFile('./data/a.txt', 'utf8', function (err, da){
if(err){
//return console.log('error')
//抛出异常
// 1.阻止程序的执行
// 2.把错误消息打印到控制台
throw err
}
console.log(da)
var fs = require('fs')
fs.readFile('./data/b.txt', 'utf8', function (err, da){
if(err){
throw err
}
console.log(da)
var fs = require('fs')
fs.readFile('./data/c.txt', 'utf8', function (err, da){
if(err){
throw err
}
console.log(da)
})
})
})
//为了保证读取顺序,必须嵌套
約束する
プロミス:上記符号化(ネストされたコールバック地獄)によって引き起こされる問題、これはECMAScript 6の新しいAPIを解決するために。
- 約束はコンストラクタです
- 容器
- 非同期タスク(保留)
- 解決
- 拒絶します
- その後、結果のコンテナを取得するには(成功、失敗)
- その後、連鎖メソッドはサポートを呼び出します
- その後、peomiseオブジェクトのメソッドを返すことがあり、その後、約束のオブジェクトを取得することは、その後の状態の結果でメソッドを戻されます
//创建 Promise 容器
var p1 = new Promise(function (resolve, reject) {
fs.readFile('./data/a.txt', 'utf8', function (err, data) {
if (err) {
//失败了,承诺容器中的任务失败了
reject(err)
} else {
//承诺中的任务成功了
resolve(data)
}
})
})
var p2 = new Promise(function (resolve, reject) {
fs.readFile('./data/a.txt', 'utf8', function (err, data) {
if (err) {
//失败了,承诺容器中的任务失败了
reject(err)
} else {
//承诺中的任务成功了
resolve(data)
}
})
})
p1
.then(function (data) {
console.log(data)
//当前函数中 return 的结果就可以在后面的 then 中 function 接收到
//没有 return 就接收到 undefined
//当 return 一个 Promise 对象的时候,后续的 then 中的方法的第一个参数有会作为 p2 的 resolve
return p2
}, function (err) {
console.log(err)
})
.then(function (data) {
console.log(data)
return p3
}, function (err) {
console.log(err)
})
- 非同期ではない自分自身を約束するが、多くの場合、非同期タスク内にパッケージされています
プロミスパッケージのバージョンreadFileの
var fs = require('fs')
function pReadFile(filePath) {
return new Promise(function (resolve, reject) {
fs.readFile(filePath, 'utf8', function (err, data) {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
pReadFile('./data/a.txt')
.then(function (data) {
console.log(data)
return pReadFile('./data/b.txt')
})
.then(function (data) {
console.log(data)
return pReadFile('./data/c.txt')
})
.then(function (data) {
console.log(data)
})
約束のシナリオ
複数のシーン非同期要求
var data = {}
$.get('http://127.0.0.1:3000/users/4')
.then(function (user) {
data.user = user
return $.get('http://127.0.0.1:3000/jobs')
})
.then(function (jobs) {
data.jobs = jobs
var htmlStr = template('tpl', data)
document.querySelector('#user_form').innerHTML = htmlStr
})
メソッドの約束パッケージのバージョンアヤックス
pGet('http://127.0.0.1:3000/users/4')
.then(function (data) {
console.log(data)
})
function pGet(url, callback) {
return new Promise(function (resolve, reject) {
var oReq = new XMLHttpRequest()
// 当请求加载成功之后要调用指定的函数
oReq.onload = function () {
// 我现在需要得到这里的 oReq.responseText
callback && callback(JSON.parse(oReq.responseText))
resolve(JSON.parse(oReq.responseText))
}
oReq.onerror = function (err) {
reject(err)
}
oReq.open("get", url, true)
oReq.send()
})
}