Promise
- 封装一个方法，给一个文件的路径，这个方法能够帮助我们读取文件，并且把内容返回
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)
})
- 终端中输入node .\01.js,就可以读取到1.txt文件中的内容
- 封装这个读取文件内容的方法
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)
})
- 使用return拿不到方法内部异步函数的返回值,使用回调callback
- 在callback中规定两个参数，第一个参数是失败的结果，第二个参数是成功的结果，同时规定了:在成功后返回的结果应该位于callback参数的第二个位置，第一个位置由于没有出错放置一个null，失败后第一个位置放置error对象
- 可以将callback回调函数拆分成两个
function getFileByPath(fpath,succCb,errCb) {
fs.readFile(fpath,'utf-8',(err,dataStr)=>{
if(err) return errCb(err)
// console.log(dataStr)
succCb(null,dataStr)
})
}
- 如果要顺序读取多个文件使用多个回调嵌套的方法，也被称为回调地狱
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)
})
})
})
- 用Promise解决回调地狱的问题
- 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)
})
})
}
- 在Promise中有两个函数resolve（成功之后的回调函数），reject（失败之后的回调函数）,在Promise构造函数的Prototype属性上有一个.then()方法，可以在实例中调用.then()方法，预先指定成功(resolve)和失败(reject)的回调函数
getFileBypath('./files/2.txt')
.then(function (data) {
console.log(data)
},function () {
console.log(err.message)
})
- .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)
})
- 捕获错误,如果前面的Promise执行失败，不想让后续的Promise操作被终止，可以为每一个Promise指定失败的回调，并且在失败的方法中return一个新的promise,使用catch，Promise执行失败立即停止后续所有Promise执行，并进入catch中抛出异常
.catch(function (err) {
console.log(err.message)
})
新闻资讯界面
- 将a标签改为路由的router-link标签
- 引入组件和匹配规则
import NewsList from './components/news/NewsList.vue'
{path:'/home/newslist',component:NewsList}
- 绘制界面，使用mui中的media-list
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="../../images/timg.jpg">
<div class="mui-media-body">
<h1>新闻</h1>
<p class='mui-ellipsis'>
<span>发表时间：2018-12-31 11:11:11</span>
<span>点击：0次</span>
</p>
</div>
</a>
</li>
</ul>
- 制作样式，使用flex布局使时间和点击次数向两边
<style scoped>
.mui-table-view,li,h1{
font-size: 14px;
}
.mui-ellipsis{
font-size: 12px;
color: #007aff;
display: flex;
justify-content: space-between;
}
</style>
