js进阶五(js回调promisepromise嵌套异常处理jquery使用promise)
Posted 易辰_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js进阶五(js回调promisepromise嵌套异常处理jquery使用promise)相关的知识，希望对你有一定的参考价值。
文章目录
同步读取
我们来看一个从文件读取内容的例子，以下是这个例子的目录结构
我们看下promiser.js的代码如下：
const fs = require("fs")
const path = require("path")
function getFileByPath(fPath)
fs.readFile(fPath,'utf-8',(err,dataStr) =>
if (err) throw err
console.log("datastr",dataStr)
return dataStr
)
var ret = getFileByPath(path.join(__dirname,'./files/1.txt'))
console.log("ret",ret)
结果我们看下log输出如下：
zhiliaodeMBP:promise zhiliao$ node ./promiser.js
ret undefined
datastr 1231
在javascript的世界中，所有代码都是单线程执行的，因为读取文件是耗时操作，所以执行到getFileByPath时，还没有读取完毕文件内容会输出undefined
回调函数
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：
const fs = require("fs")
const path = require("path")
function getFileByPath(fPath,callback)
fs.readFile(fPath,'utf-8',(err,dataStr) =>
if (err) throw err
callback(dataStr)
)
getFileByPath(path.join(__dirname,'./files/1.txt'),function(data)
console.info(data)
)
我们看下结果
zhiliaodeMBP:promise zhiliao$ node ./promiser.js
1231
回调机制处理异常
上述例子代码不完善，如果读取文件内容失败，也就是出现异常，我们怎么处理？
const fs = require("fs")
const path = require("path")
function getFileByPath(fPath,callback,errCallBack)
fs.readFile(fPath,'utf-8',(err,dataStr) =>
if (err) return errCallBack(err)
callback(dataStr)
)
getFileByPath(path.join(__dirname,'./files/1.txt'),function(data)
console.info(data)
,function(err)
if(err) return console.info(err.message)
)
我们看下测试结果，我们看到是捕获了异常：
zhiliaodeMBP:promise zhiliao$ node ./promiser.js
ENOENT: no such file or directory, open '/Users/zhiliao/zhiliao/vue/promise/files/11.txt'
promise
以上是我们读取一个文件内容，如果我们连续读取多个文件内容呢？我们可以用一种循环嵌套的方式，但是嵌套的方法过于繁琐，我们可以利用es6中的新特性promise来实现
- Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；
- 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
- 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
- Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
- 既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
5.1 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
5.2 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者； - 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；
const fs = require("fs")
const path = require("path")
function getFileByPath(fpath)
var promise = new Promise(function(resolve,reject)
fs.readFile(fpath,"utf-8",(err,dataStr)=>
if(err) return reject(err)
resolve(dataStr)
)
)
return promise
var promise = getFileByPath('./files/1.txt')
promise.then(function(data)
console.log(data,"~~~")
,function(err)
console.log(err.message,">>>>")
)
我们看下测试效果如下：
zhiliaodeMBP:promise zhiliao$ node ./promiser.js
1231 ~~~
我们简单梳理下这个promise例子的执行过程：
程序执行
1.首先加载getFileByPath进内存，
2.然后getFileByPath('./files/1.txt')调用该方法，执行getFileByPath方法内代码，执行readFile操作，这里是耗时操作
3.返回promise对象
4.promise.then传递回调函数
5.等待readFile执行完毕，执行回调函数
promise嵌套
我们还可以通过如下的方式实现批量读取文件内容
只需要在第一次读取完毕后，进行返回一个promise，然后在继续.then操作即可
function getFileByPath(fpath)
var promise = new Promise(function(resolve,reject)
fs.readFile(fpath,"utf-8",(err,dataStr)=>
if(err) return reject(err)
resolve(dataStr)
)
)
return promise
var promise1 = getFileByPath('./files/1.txt')
promise1.then(function(data)
console.log(data,"~~~")
var promise2 = getFileByPath('./files/2.txt')
return promise2
,function(err)
console.log(err.message,">>>>")
)
.then(function(data)
console.log(data,"~~~")
,function(err)
console.log(err.message,">>>>")
)
捕获异常
方法一
如果连续读取2个文件的内容，如果第一个文件读取失败，那么我们不应该停止程序，应该让他继续读取第二个文件，这就需要我们自己收到在第一次读取失败时候，做失败处理
const fs = require("fs")
const path = require("path")
function getFileByPath(fpath)
var promise = new Promise(function(resolve,reject)
fs.readFile(fpath,"utf-8",(err,dataStr)=>
if(err) return reject(err)
resolve(dataStr)
)
)
return promise
var promise1 = getFileByPath('./files/1但是.txt')
promise1.then(function(data)
console.log(data,"~~成功~")
return getFileByPath('./files/2.txt')
,function(err)
console.log(err,"~~失败~")
return getFileByPath('./files/2.txt')
)
.then(function(data)
console.log(data,"~~~")
,function(err)
console.log(err.message,">>>>")
)
测试结果如下：
zhiliaodeMBP:promise zhiliao$ node ./promiser.js [Error: ENOENT: no such file or directory, open './files/1但是.txt']
errno: -2, code: 'ENOENT', syscall: 'open',
path: './files/1但是.txt' '~~失败~'wewr ~~~
方法二
只要有任何一个then语句出错，就终止全部语句
我们还可以利用catch语句块，不要在.then 里面去处理错误异常，而是需要在外面直接catch
const fs = require("fs")
const path = require("path")
function getFileByPath(fpath)
var promise = new Promise(function(resolve,reject)
fs.readFile(fpath,"utf-8",(err,dataStr)=>
if(err) return reject(err)
resolve(dataStr)
)
)
return promise
var promise1 = getFileByPath('./files/1.txt')
promise1.then(function(data)
console.log(data,"~~成功~")
return getFileByPath('./files/2等待.txt')
)
.then(function(data)
console.log(data,"~~~")
)
.catch(function (err) // catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并 马上进入 catch 去处理 Promise中 抛出的异常；
console.log('这处理方式：' + err.message)
)
测试效果如下：
1231 ~~成功~
这是自己的处理方式：ENOENT: no such file or directory, open './files/2等待.txt'
zhiliaodeMBP:promise zhiliao$
jquery中使用promise
我们先来看一个原始的ajax请求
data.json
"name":"safly",
"age":30
<script src="./webpack_vue/node_modules/jquery/dist/jquery.min.js"></script>
<body>
<input type="button" value="getdata" id="btn">
<script>
$(function()
$("#btn").click(function()
$.ajax(
url:"./data.json",
type:"get",
dataType:"json",
success:function(data)
console.log(data)
)
)
)
</script>
</body>
</html>
通过启动一个express服务
然后看输出结果如下：
http://localhost:8473/index_test.html
我们来使用下jquery里面的promise操作
$(function()
$("#btn").click(function()
$.ajax(
url:"./data.json",
type:"get",
dataType:"json",
// success:function(data)
// console.log(data)
//
).then(function(data)
console.log(data)
)
)
)
也可以输出同样的结果
以上是关于js进阶五(js回调promisepromise嵌套异常处理jquery使用promise)的主要内容，如果未能解决你的问题，请参考以下文章