4.3-蓝桥杯-封装 Promisefy 函数-浏览器存储数据-灯颜色的变化-东奥大抽奖-布局切换-v-if与v-for为什么不能一起使用-寻找小狼人(仿写过滤器filter)

4.3-蓝桥杯-封装 Promisefy 函数-localStorage本地储存数据-灯颜色的变化-东奥大抽奖-布局切换-v-if与v-for为什么不能一起使用-寻找小狼人(仿写过滤器filter)

一.学习内容

1.1封装 Promisefy 函数

知识点：封装异步读取文件操作

const fs = require('fs');
const path = require('path');
//fs.readFile()方法用于异步读取文件
//将Promise的实例对象作为函数的返回值返回
//这样函数执行完毕后就得到一个Promise对象的实例,可以通过.then方法传入成功的回调和失败的回调
function asyncGetFileByPath(p) {
   //p文件路径
    //返回一个promise对象用于检测读取文件是否成功
    return new Promise((resolve, reject) => {
   
        // Promise对象里面的参数,会立即执行(前面说过)
        fs.readFile(path.join(__dirname, p), 'utf-8', (err, data) => {
   
            if (err) {
   
                reject(err);
            } else {
   
                resolve(data);//文件读取成功的数据
            }
        })
    })
}
asyncGetFileByPath('./files/1.txt')
    .then(
        (data) => {
    // 成功的回调
            console.log(data);
        },
        (err) => {
    // 失败的回调
            console.error(err);
        }
    )

思路：

1.观察这个promisefy函数是怎么用的，参数是一个函数,调用promisefy函数的结果被存到readFileSync里，而readFileSync在后面可以看到直接接个小括号传两个参了,所以首先调用这个promisefy返回的是一个参数为(textPath, ‘utf8’)的函数。

2.接着 该readFileSync函数使用了.then和.catch说明该函数调用的结果是个promise对象，返回readFileSync函数的结果返回的是一个新的Promise对象。

3.promisefy函数传递参数是fn是fs.readFile读取文件函数，在promise函数中这时需要进行接收，判断文件是否读取成功。

const fs = require('fs')
const path = require('path')
const textPath = path.join(__dirname, '/test.md')

// 读取示例文件
fs.readFile(textPath, 'utf8', (err, contrast) => {
   
  // 通过promisefy转化为链式调用
  //首先可以看到这个promisefy函数是怎么用的，参数是一个函数,调用promisefy函数的结果被存到readFileSync里
  const readFileSync = promisefy(fs.readFile)
  //而readFileSync在后面可以看到直接接个小括号传两个参了
  readFileSync(textPath, 'utf8')
    .then((res) => {
   
      console.log(res === contrast) // 此处结果预期：true，即promise返回内容与前面读取内容一致
    })
    .catch((err) => {
   })
})
//fn是fs.readFile读取文件函数
const promisefy = (fn) => {
   
  // TODO 此处完成该函数的封装
 //1.调用这个promisefy返回的是一个参数为(textPath, 'utf8')的函数
  return (textPath,type)=>{
   
    return new Promise((resolve,reject)=>{
   
//接收读取文件函数，并判断是否出错，没有错，就返回读取的文件
      fn(textPath,type,(err,contrast)=>{
   
        if(err){
   
          reject(err);
        }else{
   
          resolve(contrast)
        }
      })
    })
  }
}
module.exports = promisefy // 请勿删除该行代码

1.2 localStorage本地储存数据

：它只能存储字符串格式的数据

1.存储数据

 //先将数据转化为字符串进行存储
 window.localStorage.setItem('(数据名)', JSON.stringify(data));

2.读取数据

 //获取数据时需要进行反编译，JSON.parse将json数据转化为js数据
const data=JSON.parse(window.localStorage.getItem('(数据名)'));

1.3灯颜色的变化

思路：需要开启两个定时器，时间分别是3s,6s.在两个定时器中调用相应灯亮的函数，在红灯函数中，需要显示红灯前，需要将默认灯隐藏，绿灯函数中需要将红灯隐藏，在开启绿灯。

// TODO：完善此函数 显示红色颜色的灯
function red() {