关于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更加晋升性能，也更便于谬误定位及解决。