js进阶五(js回调、promise、promise嵌套、异常处理、jquery使用promise)

js进阶五(js回调、promise、promise嵌套、异常处理、jquery使用promise)

丙申 2018-10-19 18:06:24  5366  收藏 5
展开
文章目录
同步读取
回调函数
回调机制处理异常
promise
promise嵌套
捕获异常
方法一
方法二
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结果我们看下log输出如下:

zhiliaodeMBP:promise zhiliao$ node ./promiser.js
ret undefined
datastr 1231
1
2
3
在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)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
我们看下结果

zhiliaodeMBP:promise zhiliao$ node ./promiser.js
1231
1
2
回调机制处理异常
上述例子代码不完善,如果读取文件内容失败,也就是出现异常,我们怎么处理?

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)
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
我们看下测试结果,我们看到是捕获了异常:

zhiliaodeMBP:promise zhiliao$ node ./promiser.js
ENOENT: no such file or directory, open '/Users/zhiliao/zhiliao/vue/promise/files/11.txt'
1
2
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,">>>>")
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
我们看下测试效果如下:

zhiliaodeMBP:promise zhiliao$ node ./promiser.js
1231 ~~~
1
2
我们简单梳理下这个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,">>>>")
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
捕获异常
方法一
如果连续读取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,">>>>")
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
测试结果如下:

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 ~~~
1
2
3
方法二
只要有任何一个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)
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
测试效果如下:

1231 ~~成功~
这是自己的处理方式:ENOENT: no such file or directory, open './files/2等待.txt'
zhiliaodeMBP:promise zhiliao$
1
2
3
jquery中使用promise

我们先来看一个原始的ajax请求
data.json

{
    "name":"safly",
    "age":30
}
1
2
3
4

1




你可能感兴趣的:(个人浅谈,架构设计模式——前后端分离,前端—Jquery)