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文件中引入使用

                  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>" aria-label="复制" data-bs-original-title="复制"></button>
</div>
      </div><pre class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
      <span class="hljs-keyword">import</span> {gerMultiUsername} <span class="hljs-keyword">from</span> <span class="hljs-string">'@/assets/js/utils'</span>
      
      <span class="hljs-attr">methods</span>:{
      <span class="hljs-title function_">getAccessLogs</span>(<span class="hljs-params"></span>){
          <span class="hljs-variable language_">this</span>.<span class="hljs-property">$apollo</span>.<span class="hljs-title function_">query</span>({
                  <span class="hljs-attr">query</span>: gqlreq.<span class="hljs-property">accessLogs</span>,
                          <span class="hljs-attr">variables</span>:{
                                    <span class="hljs-attr">first</span>:<span class="hljs-number">20</span>,
                                              <span class="hljs-attr">offset</span>:<span class="hljs-number">0</span>
                                                      }
                                                            }).<span class="hljs-title function_">then</span>(<span class="hljs-keyword">async</span> (res) =&gt; {
                                                                     <span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> &amp;&amp; res.<span class="hljs-property">data</span>.<span class="hljs-property">accessLogs</span>&amp;&amp; res.<span class="hljs-property">data</span>.<span class="hljs-property">accessLogs</span>) {
                                                                               <span class="hljs-keyword">let</span> logs=commonjs.<span class="hljs-title function_">takeoffEdges</span>(res.<span class="hljs-property">data</span>, <span class="hljs-string">"accessLogs"</span>);
                                                                                         <span class="hljs-keyword">if</span>((logs&amp;&amp;logs.<span class="hljs-property">length</span>)){
                                                                                                     <span class="hljs-comment">//转openid为人员姓名</span>
                                                                                                                 <span class="hljs-comment">// 读取account为openid,匹配后将姓名set到accountname字段中</span>
                                                                                                                             <span class="hljs-keyword">await</span> <span class="hljs-title function_">gerMultiUsername</span>(logs,<span class="hljs-string">'account'</span>,<span class="hljs-string">'accountname'</span>).<span class="hljs-title function_">catch</span>(<span class="hljs-function">()=&gt;</span>{})
                                                                                                                                         <span class="hljs-variable language_">this</span>.<span class="hljs-property">tabledata</span>=logs
                                                                                                                                                 }
                                                                                                                                                       }).<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">e</span>)=&gt;</span>{
                                                                                                                                                               <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'catch err'</span>,e)
                                                                                                                                                                     })
                                                                                                                                                                     }
                                                                                                                                                                     
                                                                                                                                                                     }
                                                                                                                                                                     </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre><p><strong>3:控制台请求</strong><br><br><br></p><p>根据图2、3可见,虽然查询了两个人的openid,但是控制台只发起了一个请求。返回结果中也根据query语句返回了两个请求结果。如果某一个请求发生错误,会在对应请求结果中返回错误信息,并不会污染其他请求。</p><p>相对于promise.all更加提升性能,也更便于错误定位及处理。</p>