promise使用
promise
回调函数解决异步问题
需求：依次读取1.txt，2.txt,3.txt中的内容
回调地狱：
const fs = require('fs');
const path = require('path');
function getPath(path,succFun,errFun) {
fs.readFile(path,'utf-8',function (err,data) {
if(err) {
return errFun(err)
}else {
succFun(data)
}
})
}
getPath(path.join(__dirname,'./1.txt'),function (data) {
console.log(data)
getPath(path.join(__dirname,'./2.txt'),function (data) {
console.log(data)
getPath(path.join(__dirname,'./3.txt'),function (data) {
console.log(data)
},function (err) {
console.log('-------'+ err.message)
})
},function (err) {
console.log('-------'+ err.message)
})
},function (err) {
console.log('-------'+ err.message)
})
promise
// 1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；
// 2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
// 3. 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
// 4. Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
// 5. 既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
// 5.1 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
// 5.2 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
// 5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者；
// 6. 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；
// 注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作；
// 什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事情，目前还不清楚
// var promise = new Promise()
// 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作
/* var promise = new Promise(function(){
// 这个 function 内部写的就是具体的异步操作！！！
}) */
const fs = require(‘fs’)
// 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码
// 也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码；
const fs = require('fs');
const path = require('path');
function getPath(path) {
return new Promise(function (resolve,reject) {
fs.readFile(path,'utf-8',function (err,data) {
if(err){
return reject(err)
}else {
resolve(data)
}
})
})
}
getPath(path.join(__dirname,'./1.txt')).then(function (data) {
console.log(data);
return getPath(path.join(__dirname,'./2.txt'))
},function (err) {
console.log(err)
}).then(function (data) {
console.log(data)
return getPath(path.join(__dirname,'./3.txt'))
}).then(function (data) {
console.log(data)
})
promise捕获异常
前面执行失败不影响后续的执行
const fs = require('fs');
const path = require('path');
function getPath(path) {
return new Promise(function (resolve,reject) {
fs.readFile(path,'utf-8',function (err,data) {
if(err){
return reject(err)
}else {
resolve(data)
}
})
})
}
getPath(path.join(__dirname,'./1.txt')).then(function (data) {
console.log(data);
return getPath(path.join(__dirname,'./22.txt'))
},function (err) {
console.log(err)
return getPath(path.join(__dirname,'./2.txt'))
}).then(function (data) {
console.log(data)
return getPath(path.join(__dirname,'./3.txt'))
},function (err) {
console.log(err.message);
return getPath(path.join(__dirname,'./3.txt'))
}).then(function (data) {
console.log(data)
})
前面输出失败不允许后续继续执行
.catch(function(err){
console.log(err.message)
})
const fs = require('fs');
const path = require('path');
function getPath(path) {
return new Promise(function (resolve,reject) {
fs.readFile(path,'utf-8',function (err,data) {
if(err){
return reject(err)
}else {
resolve(data)
}
})
})
}
getPath(path.join(__dirname,'./1.txt')).then(function (data) {
console.log(data);
return getPath(path.join(__dirname,'./22.txt'))
}).then(function (data) {
console.log(data);
return getPath(path.join(__dirname,'./3.txt'))
}).then(function (data) {
console.log(data)
}).catch(function (err) {
console.log('这是自己处理的报错信息' + err.message)
})
Ajax中的promise
student.json:
{
"students": {
"name": "zs",
"age": 20
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="js/jquery-1.12.2.min.js">script>
head>
<body>
<input type="button" value="点击" id="btn">
<script>
$(function () {
$('#btn').on('click',function () {
$.ajax({
url:'./student.json',
type:'get',
dataType:'json',
/* success:function (data) {
console.log(data.students)
}*/
}).then(function (data) {
console.log(data.students)
})
})
})
script>
body>
html>
$(function () {
$('#btn').on('click', function () {
$.ajax({
url: './student.jsn',
type: 'get',
dataType: 'json',
// success:function (data) {
//
// }
}).then(function (data) {
console.log(data.students)
}, function (err) {
console.log(err)
})
})
})