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)
})
  1. 终端中输入node .\01.js,就可以读取到1.txt文件中的内容
  2. 封装这个读取文件内容的方法
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)
})
  1. 使用return拿不到方法内部异步函数的返回值,使用回调callback
  2. 在callback中规定两个参数,第一个参数是失败的结果,第二个参数是成功的结果,同时规定了:在成功后返回的结果应该位于callback参数的第二个位置,第一个位置由于没有出错放置一个null,失败后第一个位置放置error对象
  3. 可以将callback回调函数拆分成两个
function getFileByPath(fpath,succCb,errCb) {
    fs.readFile(fpath,'utf-8',(err,dataStr)=>{
        if(err) return errCb(err)
        // console.log(dataStr)
        succCb(null,dataStr)
    })
}
  1. 如果要顺序读取多个文件使用多个回调嵌套的方法,也被称为回调地狱
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)

        })
    })
})
  1. 用Promise解决回调地狱的问题
  2. 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)
        })
    })
    
}
  1. 在Promise中有两个函数resolve(成功之后的回调函数),reject(失败之后的回调函数),在Promise构造函数的Prototype属性上有一个.then()方法,可以在实例中调用.then()方法,预先指定成功(resolve)和失败(reject)的回调函数
getFileBypath('./files/2.txt')
.then(function (data) {
    console.log(data)
},function () {
    console.log(err.message)

})
  1. .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)
    })
  1. 捕获错误,如果前面的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}
  1. 绘制界面,使用mui中的media-list

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

你可能感兴趣的:(Promise和新闻资讯)