Promise和新闻资讯

Promise

1. 封装一个方法，给一个文件的路径，这个方法能够帮助我们读取文件，并且把内容返回

const fs =require('fs')
const path=require('path')


//普通读取文件的方式
fs.readFile(path.join(__dirname,'./files/1.txt'),'utf-8',(err,dataStr)=>{
    if(err) throw Error
    console.log(dataStr)
})

2. 终端中输入node .\01.js,就可以读取到1.txt文件中的内容
3. 封装这个读取文件内容的方法

function getFileByPath(fpath,callback) {
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err) return callback(err)
        // console.log(dataStr)
        callback(null,dataStr)
    })
}
getFileByPath(path.join(__dirname,'./files/1.txt'),(err,dataStr)=>{
    if(err) return console.log(err.message)
    console.log(dataStr)
})

4. 使用return拿不到方法内部异步函数的返回值,使用回调callback
5. 在callback中规定两个参数，第一个参数是失败的结果，第二个参数是成功的结果，同时规定了:在成功后返回的结果应该位于callback参数的第二个位置，第一个位置由于没有出错放置一个null，失败后第一个位置放置error对象
6. 可以将callback回调函数拆分成两个

function getFileByPath(fpath,succCb,errCb) {
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err) return errCb(err)
        // console.log(dataStr)
        succCb(null,dataStr)
    })
}

7. 如果要顺序读取多个文件使用多个回调嵌套的方法，也被称为回调地狱

getFileByPath(path.join(__dirname,'./files/1.txt'),function (data) {
    console.log(data)
    
    getFileByPath(path.join(__dirname,'./files/2.txt'),function (data) {
        console.log(data)

        getFileByPath(path.join(__dirname,'./files/3.txt'),function (data) {
            console.log(data)

        })
    })
})

8. 用Promise解决回调地狱的问题
9. Promise就是单纯的解决回调地狱问题，并不能减少代码量，Promise是一个构造函数，因此可以通过new得到一个Promise实例，Promise表示一个异步操作，无法用return将操作结果返回,当new实例被创建时就会立即执行实例中的代码，所以要用函数包裹

const fs=require('fs')

function getFileBypath(fpath) {
    return new Promise(function (resolve,reject) {
        fs.readFile(fpath,'utf-8',(err,dataStr)=>{
            if (err)return reject(err)
            resolve(dataStr)
        })
    })
    
}

10. 在Promise中有两个函数resolve（成功之后的回调函数），reject（失败之后的回调函数）,在Promise构造函数的Prototype属性上有一个.then()方法，可以在实例中调用.then()方法，预先指定成功(resolve)和失败(reject)的回调函数

getFileBypath('./files/2.txt')
.then(function (data) {
    console.log(data)
},function () {
    console.log(err.message)

})

11. .then()指定回调函数时是，成功的回调函数必须传，失败的回调可以省略，在上一个.then中返回一个Promise实例继续使用下一个.then

getFileBypath('./files/1.txt')
    .then(function (data) {
        console.log(data)

        return getFileBypath('./files/2.txt')
    })
    .then(function (data) {
        console.log(data)

        return getFileBypath('./files/3.txt')
    })
    .then(function (data) {
        console.log(data)
    })

12. 捕获错误,如果前面的Promise执行失败，不想让后续的Promise操作被终止，可以为每一个Promise指定失败的回调，并且在失败的方法中return一个新的promise,使用catch，Promise执行失败立即停止后续所有Promise执行，并进入catch中抛出异常

.catch(function (err) {
    console.log(err.message)
})

---

新闻资讯界面

1. 将a标签改为路由的router-link标签
2. 引入组件和匹配规则

import NewsList from './components/news/NewsList.vue'

{path:'/home/newslist',component:NewsList}

3. 绘制界面，使用mui中的media-list

    

        
            
            

                
新闻
                

                    发表时间：2018-12-31 11:11:11
                    点击：0次
                
            
        
    

2. 制作样式，使用flex布局使时间和点击次数向两边