关于javascript:GraphQL-封装多个请求使得network只有一条请求记录

1，js 办法封装

//util.js
// 一些发动申请的依赖
import gql from 'graphql-tag'
import initapolloclient from '@/assets/js/apolloclient.js'
import $store from '@/store/index'
    // 依据 openid 获取人员姓名
    // openid 的取值 matchkey
    // 匹配后将姓名 set 到 readkey 字段中
export const gerMultiUsername = async(origindata, matchkey, readkey) => {let allopenids = origindata.map((item) => item[matchkey]);
    allopenids = [...new Set(allopenids)];
    let queryinputs = []; // 形参
    let queryinputsval = {}; // 实参
    let querybody = []; // 申请体
    allopenids.forEach((item, index) => {queryinputs.push(`$keywords${index}:String`);
        queryinputsval[`keywords${index}`] = `${item}`; //openid 进行过滤
        querybody.push(`queryuser${index}:users(keywords:$keywords${index}
          ){edges{node{name  openid}}
          }`)
    })
    let queryall = `query (${queryinputs.join()}){${querybody.join('')}
      }`;
    const iamuri = ($store.state.api_gateway_uri + "/iam");
    const iamclient = initapolloclient.initAppllo(iamuri);
    await iamclient.query({query: gql(queryall),
        variables: queryinputsval
    }).then((res) => {if (res.data) {let successitem = []
            for (let key in res.data) {if (res.data[key]) {if (res.data[key].edges && res.data[key].edges.length == 1 && res.data[key].edges[0].node) {successitem.push(res.data[key].edges[0].node)
                    }
                }
            }
            // 
            if (successitem && successitem.length) {successitem.forEach((item) => {if (item.openid) {origindata.forEach((nitem) => {if (item.openid == nitem[matchkey]) {nitem[readkey] = item.name ? item.name : nitem[matchkey]
                            }
                        })
                    }
                })
            }
        }
    }).catch((err) => {console.log(err)
    })
}

2:vue 文件中引入应用

<script>
import {gerMultiUsername} from '@/assets/js/utils'

methods:{getAccessLogs(){
    this.$apollo.query({
        query: gqlreq.accessLogs,
        variables:{
          first:20,
          offset:0
        }
      }).then(async (res) => {if (res.data && res.data.accessLogs&& res.data.accessLogs) {let logs=commonjs.takeoffEdges(res.data, "accessLogs");
          if((logs&&logs.length)){
            // 转 openid 为人员姓名
            // 读取 account 为 openid, 匹配后将姓名 set 到 accountname 字段中
            await gerMultiUsername(logs,'account','accountname').catch(()=>{})
            this.tabledata=logs
        }
      }).catch((e)=>{console.log('catch err',e)
      })
}

}
</script>

3: 控制台申请

依据图 2、3 可见，尽管查问了两个人的 openid，然而控制台只发动了一个申请。返回后果中也依据 query 语句返回了两个申请后果。如果某一个申请产生谬误，会在对应申请后果中返回错误信息，并不会净化其余申请。

绝对于 promise.all 更加晋升性能，也更便于谬误定位及解决。