Node——five②

- then的链式使用（promise）

var fs = require('fs')

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/b.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err)
        } else {
            resolve(data)
        }
    })
})

var p3 = new Promise(function (resolve, reject) {
    fs.readFile('./data/c.txt', 'utf8', function (err, data) {
        if (err) {
            reject(err)
        } else {
            resolve(data)
        }
    })
})

p1
    .then(function (data) {
        console.log(data)
        // 当 p1 读取成功的时候
        // 当前函数中 return 的结果就可以在后面的 then 中 function 接收到
        // 当你 return 123 后面就接收到 123
        // return 'hello' 后面就接收到 'hello'
        // 没有 return 后面收到的就是 undefined
        // 上面那些 return 的数据没什么卵用
        // 真正有用的是：我们可以 return 一个 Promise 对象
        // 当 return 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数会作为 p2 的 resolve
        //
        return p2
    }, function (err) {
        console.log('读取文件失败了', err)
    })
    .then(function (data) {
        console.log(data)
        return p3
    })
    .then(function (data) {
        console.log(data)
        console.log('end')
    })

在这里插入图片描述

- 封装promise

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

路径不同传入
在这里插入图片描述

- promise使用场景

html


<body>
    <form action="USER.js" id="user_form">
    </form>
    <script type="text/template" id="tpl">
        <div>
<label for="">用户名</label>
<input type="text" value="{{ user.username }}">
</div>
<div>
<label for="">年龄</label>
<input type="text" 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>
        // 用户表
        // 其中一个接口获取用户数据
        // 职业：2
        // 职业信息表
        // 其中一个接口获取所有的职业信息
        // get('http://127.0.0.1:3000/users/4', function (userData) {
        // get('http://127.0.0.1:3000/jobs', function (jobsData) {
        // var htmlStr = template('tpl', {
        // user: JSON.parse(userData),
        // jobs: JSON.parse(jobsData)
        // })
        // console.log(htmlStr)
        // document.querySelector('#user_form').innerHTML = htmlStr
        // })
        // })

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

        // var data = {}
        // pGet('http://127.0.0.1:3000/users/4')
        // .then(function (user) {
        // data.user = user
        // return pGet('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', function (data) {
        // console.log(data)
        // })

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

        // 这个 get 是 callback 方式的 API
        // 可以使用 Promise 来解决这个问题
        function get(url, callback) {
            var oReq = new XMLHttpRequest()
            // 当请求加载成功之后要调用指定的函数
            oReq.onload = function () {
                // 我现在需要得到这里的 oReq.responseText
                callback(oReq.responseText)
            }
            oReq.open("get", url, true)
            oReq.send()
        }
    </script>
</body>

USER.js

{
    "users": [{
            "id": 1,
            "username": "admin",
            "age": 18,
            "job": 2
        },
        {
            "id": 2,
            "username": "admin2",
            "age": 18,
            "job": 4
        },
        {
            "id": 3,
            "username": "admin3",
            "age": 18,
            "job": 2
        },
        {
            "id": 4,
            "username": "admin3",
            "age": 18,
            "job": 3
        }
    ],
    "jobs": [{
            "id": 1,
            "name": "学生sheng"
        },
        {
            "id": 2,
            "name": "老师"
        },
        {
            "id": 3,
            "name": "司机"
        },
        {
            "id": 4,
            "name": "画家"
        },
        {
            "id": 5,
            "name": "演员"
        },
        {
            "id": 6,
            "name": "电竞人"
        }
    ]
}

- 两个find方法

EcmaScript 6 对数组新增了很多方法
find
findIndex
find 接收一个方法作为参数，方法内部返回一个条件
find 会遍历所有的元素，执行你给定的带有条件返回值的函数
符合该条件的元素会作为 find 方法的返回值
如果遍历结束还没有符合该条件的元素，则返回 undefined

var users = [{
        id: 1,
        name: '张三'
    },
    {
        id: 2,
        name: '张三'
    },
    {
        id: 3,
        name: '张三'
    },
    {
        id: 4,
        name: '张三'
    }
]

Array.prototype.myFind = function (conditionFunc) {
    // var conditionFunc = function (item, index) { return item.id === 4 }
    for (var i = 0; i < this.length; i++) {
        if (conditionFunc(this[i], i)) {
            return this[i]
        }
    }
}

var ret = users.myFind(function (item, index) {
    return item.id === 2
})

console.log(ret)

回调函数

异步编程
如果需要得到一个函数内部异步操作的结果，这是时候必须通过回调函数来获取
在调用的位置传递一个函数进来
在封装的函数内部调用传递进来的函数

find、findIndex、forEach

数组的遍历方法，都是对函数作为参数一种运用
every
some
includes
map
reduce
resolve

then 方法获取容器的结果（成功的，失败的）
then 方法支持链式调用
可以在 then 方法中返回一个 promise 对象，然后在后面的 then 方法中获取上一个 then 返回的 promise 对象的状态结果

- then的链式使用（promise）

- 封装promise

- promise使用场景

- 两个find方法

猜你喜欢