vue(emit)、node(promise、 promise封装文件读取)

emit

<!-- 【$emit】

子里如何给父组件传递数据?

利用发通知的形式来间接传数据。

发通知的语法:this.$emit('自定义的事件名'数据)


 

父里要订阅这个通知(相当于监听这个事件)

<子组件 @自定义的事件名="函数">


 

当子的$emit执行时,就会自动调用父里绑定的函数,函数的参数就是子传递过来的数据。

例:

子里的代码

<button aclick="$emit('sb','hello')">点击后,要给父传递数据</button>

解释:当子组件里面点了这个按钮,就会触发一个叫sb的事件,那个父组件如果监听了sb就会调用。

父里的代码

<子组件 @sb="函数"/>

当sb事件通知时,就会调用上面的函数,函数的参数就是永不过时。 -

 stuEmit.vue

<template>
    <div class="son">
    <button @click="fn1"> 点击这个按钮,子组件的值传递给父组件</button>
    </div>
    </template>

    <script>
    export default {
    methods:{
    fn1(){
    //给父组件传递值
    // this.$emit('自定义事件名',传递的数据)
     this.$emit('sb','hello')
    }
}
    }
    </script>

    <style>
    .son {
     width: 500px;
     height:500px;
     border: 1px solid gold;
    }
    
    </style>

 promise

// 导入fs filesystem 文件管理器

const fs = require('fs')


 

// 构建promise对象

 const ps = new Promise((resolve, reject) => {

    // 调用fs模块中的文件

    fs.readFile('./1.txt', (err, data) => {

        // 读取成功状态下

        if (!err) {

            //   调用resolve方法并传入读取到的内容

            resolve(data)

        } else {

            // 读取失败调用reject方法并传入错误信息

            reject(err)

        }

    })

})

// promise还可以调用两个方法

ps.then( res => {

    console.log('then调用了' + res);

})

.catch( err => {

    console.log('catch调用' + err);

})

作业

console.log(1);

new Promise((resolve,reject) => {

    console.log(2);

    setTimeout(() => {

        console.log(6);

        // 产生一个0到10的随机数

        let num = Math.floor(Math.random() * 11)

        // 如果大于等于5就resolve

        if(num >= 5){

            resolve()

        } else {

            // 否则就reject

            reject()

        }

    },1000);

    console.log(3);

})

.then(res => {

    console.log(4);

})

.catch(err => {

    console.log(7);

})

promise封装文件读取

fs.js

//导入fs模块

const fs = require('fs')

//构建一个读取文件的函数
function readFile(path){

    //构建的promise对象,将异步代码同步化
    return new Promise((resolve,reject) => {

        //异步代码读取文件
        fs.readFile(path,(err,data) => {
            //读取成功
            if(!err) {

                resolve(data)

            }else{

                reject(err)

            }
        })
    })

}

readFile('./1.txt')
.then(res => {
    console.log('读取到的结果是'+ res);
})
.catch(err => {
    console.log(err);
})
readFile('./2.txt')
.then(res => {
    console.log('读取到的结果是' + res);
})

//完成了写入文件时函数的封装
function writeFile(path,content){

    return new Promise ((resolve,reject) => {

        fs.writeFile(path,content,err =>{

            if(!err){
                resolve()
            }
            else{
                reject(err)
            }
        })
    })
    
}
writeFile('./1.txt','小黑邹')
.then(res => {
    console.log(res);
})
.catch (err => {
    console.log(err);
})
writeFile('./2.txt','1234')




 index.js

// 大部分涉及异步操作的库、模块,都提供了基于promise的封装版本
//fs模块也有promise版

const fs = require('fs/promises')

fs.readFile('./1.txt')
.then (data => {

// console.log(data);
console.log(data.toString());

})
.catch (err => {

console.log(err);
})
fs.writeFile('./2.txt','我是2新写入的内容')
.then(()=> {

console.log('写入成功');})

.catch( err => {
console.log(err);
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中,使用axios封装Promise.all的步骤如下: 首先,可以封装一个Promise函数,该函数接受三个参数jsonData、config和index,通过返回一个新的Promise对象,可以用来处理上传请求。在该Promise对象中,使用axios进行上传请求,并通过then方法处理请求成功的情况,如果返回码为0,则将返回的数据传递到下一个Promise中。如果请求失败,则使用catch方法将错误信息和配置项传递给下一个Promise。 第二步,使用async和await再次封装Promise函数,并返回该Promise的值。通过在该函数中调用上一步封装Promise函数,并使用await关键字等待该Promise的结果,然后返回结果。 第四步,使用Promise.all获取所有方法正常执行后的结果集。在该步骤中,可以将封装好的Promise函数放入一个数组中,然后使用Promise.all方法来执行这些Promise函数,并使用then方法处理正常执行后的结果集。如果有任何一个Promise函数出现异常,则使用catch方法来处理异常情况。 综上所述,以上是使用axios封装Promise.all的步骤。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue中循环遍历axios问题,使用promise.all解决,promise.all异常解决](https://blog.csdn.net/Uookic/article/details/118409301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值