日常开发记录-正确的prop传参，reduce搭配promise的使用

1.正确的prop传参
2.reduce搭配promise的使用

1.正确的prop传参

一般会的父组件传参子组件

//父组件
<A :demodata.sync="testData" :listData.sync="testData2"></A>
data () {return {testData: {content: '',textStyle: {fontsize: '14px',},},testData2: [{content: '11',textStyle: {fontsize: '14px',},},],}},
//子组件
<el-input v-model="demodata.content"></el-input>

然后子组件v-model，看着和使用起来是可以达到双向绑定的，但是是不推荐这样改的。
在这里插入图片描述

//子组件
<template><div>{{ demodata }}<!-- 不要直接修改 props，使用事件通知父组件更新
使用 .sync 修饰符或 v-model 实现双向绑定,这种感觉单个属性可以，类似“监听”整个对象数组貌似不太行 --><el-input :value="demodata.content" @input="changeInput"></el-input><el-table :data="localData"><el-table-column prop="content" label="姓名"></el-table-column></el-table><el-button @click="add">添加</el-button></div>
</template>
<script>
export default {props: {demodata: {type: Object,default: () => { }},listData: {type: Array,default: () => []}},data () {return {localData: [...this.listData]}},watch: {listData: {handler (newVal) {this.localData = [...newVal]},deep: true}},mounted () {},methods: {changeInput (val) {this.$emit('update:demodata', {...this.demodata,content: val})}, add () {this.localData.push({ name: 'test' })this.$emit('update:listData', [...this.localData])}}
}
</script>

2.reduce搭配promise的使用

  logInOrder (urls) {const textPromises = urls.map((url) => {return fetch(url).then((response) => response.json()) // 修改为 json() 因为返回的是 JSON 数据.then((data) => JSON.stringify(data, null, 2)) // 格式化输出})console.log('log', textPromises)return textPromises.reduce((chain, textPromise) => {console.log('chain', chain,'textPromise', textPromise)return chain.then(() => textPromise).then((text) => {console.log('获取到的数据：\n', text)console.log('------------------------')return text})}, Promise.resolve())},

reduce里面的代码有点没太理解，本来一般也少写，特别是then(() => textPromise)这没太看懂，改下写法：

logInOrder(urls) {const textPromises = urls.map(url => {return fetch(url).then(response => response.json()).then(data => JSON.stringify(data, null, 2));});return textPromises.reduce((chain, textPromise) => {return chain.then(() => {return textPromise.then(text => {console.log('获取到的数据：\n', text);console.log('------------------------');return text; });});}, Promise.resolve());
}

现在看得清楚了多，看一次的执行，就是轮询调用promise.then。而且有return text和没有return text的每次chain也是不一样的。

//调用实例const a = this.logInOrder(['https://jsonplaceholder.typicode.com/posts/1','https://jsonplaceholder.typicode.com/posts/2','https://jsonplaceholder.typicode.com/posts/3','https://jsonplaceholder.typicode.com/posts/4','https://jsonplaceholder.typicode.com/posts/5'])console.log('a', a)

猜猜它的打印结果呢。
在这里插入图片描述
有点出乎我的意料。。。，怎么也不会是这个结果嘛感觉。自己想的理想输出是先打印chain，然后是获取到的数据，最后再是a的值，而且a也不应该是一个promise吧。这段代码里有很多的return，第一个return是函数整体的返回值给return出去，第二个return是reduce函数里传递给下一个的，第三个return是为了按顺序将多个异步按顺序串起来。最后一个return是整个函数要返回的值。
在这里插入图片描述
之所以现在的打印结果是上面的这个，其实可以当成先执行的同步，再执行到异步代码。把最后的结果换个写法

 async mounted () {const a = await this.logInOrder(['https://jsonplaceholder.typicode.com/posts/1','https://jsonplaceholder.typicode.com/posts/2','https://jsonplaceholder.typicode.com/posts/3','https://jsonplaceholder.typicode.com/posts/4','https://jsonplaceholder.typicode.com/posts/5'])console.log('a', a)},
或则 mounted () {this.logInOrder(['https://jsonplaceholder.typicode.com/posts/1','https://jsonplaceholder.typicode.com/posts/2','https://jsonplaceholder.typicode.com/posts/3','https://jsonplaceholder.typicode.com/posts/4','https://jsonplaceholder.typicode.com/posts/5']).then(a =>{console.log('a', a)})},