微信小程序使用Graphql请求接口封装（wxGraphql.js）

之前写的一个小程序的使用graphql进行请求的后台的接口，当然了 对所有的完整的项目， 请求接口的管理是必要的，但是个人觉得这个请求接口做的好不是很好，需要进一步的优化，后期还会优化请求及拦截部分。

首先创建一个wxGraphql.js 的文件

wxGraphql.js

var responseHandler = function (resolve, reject, res, errorHandler) {
  var retData = res.data.errors ? res.data.errors[0].message : {
    code: 200
  };
  if (res.statusCode == 200 && retData.code == 200) {
    resolve(res.data.data);
  } else {
    reject(res.data);
    if (errorHandler) {
      errorHandler(res.data);
    }
  }
}

var GraphQL = function (obj, retObj) {

  if (!obj.url) {
    throw "请提供GraphQL请求URL(.url)"
  }

  retObj = retObj || false;
  let header = {};

  if (typeof obj.header === 'function') {
    header = obj.header();
  }

  if (typeof obj.header === 'object') {
    header = obj.header;
  }

  if (retObj) {
    return {
      query: function (queryObj) {
        return new Promise(function (resolve, reject) {
          wx.request({
            url: obj.url,
            method: 'POST',
            data: JSON.stringify({
              query: queryObj.query,
              variables: queryObj.variables
            }),
            header: queryObj.header || header,
            complete: function (res) {
              responseHandler(resolve, reject, res, obj.errorHandler);
            }
          });
        });
      },

      mutate: function (mutateObj) {
        return new Promise(function (resolve, reject) {
          wx.request({
            url: obj.url,
            method: 'POST',
            data: JSON.stringify({
              query: mutateObj.mutation,
              variables: mutateObj.variables
            }),
            header: mutateObj.header || header,
            complete: function (res) {
              responseHandler(resolve, reject, res);
            }
          });
        });
      }
    }
  } else {
    return function (_obj) {

      if (!_obj.body) {
        throw "请提供GraphQL请求body"
      }

      return wx.request({
        url: obj.url,
        method: 'POST',
        data: JSON.stringify(_obj.body),
        success: _obj.success,
        fail: _obj.fail,
        header: _obj.header || header,
        complete: _obj.complete
      });
    }
  }
}

module.exports = {
  GraphQL: GraphQL
}

再创建一个config.js文件

mport gql from "./wxGraphql.js";
const GraphQL = gql.GraphQL;
const basicgql = GraphQL({
    url: "", //所有请求的baseUrl  url 必填
  },
  true
)

export default basicgql

创建一个api.js文件

import basicgql from './config'
async function querygql(str, variables) {
    // 这里可以做一些跟hedear相关的配置或者判断
    let token = wx.getStorageSync('token')
      header= {
        token: token,
        "wxapp-info":JSON.stringify(systemInfo)
      }
    let res = await basicgql.query({
      query: str,
      variables: variables,
      header: header 
    })
    return res
  } catch (error) {
    return error
  }
}

async function mutationgql(str='', variables={}) {
// header 的配置
      header= {
        token: token,
        appopenid: appopenid,
        "wxapp-info":JSON.stringify(systemInfo)
      }
    let res = await basicgql.mutate({
      mutation: str,
      variables: variables,
      header: header 
    })
    return res
  } catch (error) {
    return error
  }
}
export {
  querygql,
  mutationgql
}。

然后在需要的页面进行import   querygql 或者 mutationgql 进行请求就ok啦