在uniApp Vue2 浙里办H5 MGOP请求封装

在 UniApp 中使用 @aligov/jssdk-mgop 对 MGOP 接口进行封装。

1. 安装 @aligov/jssdk-mgop

首先，确保已经安装了 @aligov/jssdk-mgop。如果尚未安装，可以通过 npm 安装：

npm install @aligov/jssdk-mgop --save

2. 封装请求方法

接下来，封装一个用于发起请求的函数，处理通用的请求逻辑。

import { mgop } from '@aligov/jssdk-mgop'; import {hideLoading, showToast} from "@/hooks/usePromptHooks"; import useStorageDataHooks from "@/hooks/useStorageDataHooks"; import store from "@/store"; //逻辑重新写 const service=(param)=>{ const {delStorage,getStorage}=useStorageDataHooks() return new Promise((resolve, reject) => { const header ={ 'Content-Type':'' } header['X-Access-Token']=store.state.token||getStorage('token') mgop({ api:mgop.xxx.xxx.${param.url}, // 必须 host:'mapi.zjzwfw.gov.cn/',//这个得配置 dataType: param.dataType || 'JSON', //默认就json 同type type: param.method||'GET', //默认就get，如果就get，那么，可以不穿 appKey: 'key'||param.key, // 必须 data:param.data, timeout:param.timeot|| 5000, header:{ ...header }, onSuccess: res => { hideLoading() const {code,msg,message} = res?.data

         //token失效了
         if(code===401){
            showToast('您的登录已失效，请登录后再操作')
            delStorage('token')
            delStorage('userInfo')
            setTimeout(() => {
               uni.switchTab({
                  url: '/pages/index/index',
               })
            }, 1000)
            return
         }
         resolve(res?.data)
      },
      onFail: err => {
         const {errorMessage}=err
         showToast(errorMessage)
         reject(err)
      }
   });
})

}

export default service

4. 在组件中使用请求方法

在 Vue 组件中，可以使用封装好的 mgopRequest 方法来发送请求。

<template>
  <!-- 页面内容 -->
</template>

<script>
import { mgopRequest } from "@/path/to/mgopService";

export default {
  methods: {
    fetchData() {
      mgopRequest({ param1: "url" })
        .then(data => {
          console.log("请求成功: ", data);
        })
        .catch(error => {
          console.error("请求失败: ", error);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

5. 处理请求和响应

在实际的应用中，你可能需要根据具体的业务需求来处理请求参数和响应数据。这可能涉及到数据格式化、错误处理、用户反馈等。

结语

通过以上步骤，你可以在 UniApp 项目中高效地使用 @aligov/jssdk-mgop 来与政务钉钉的 MGOP 服务进行交互。封装的请求方法简化了 API 调用，使得代码更加整洁并且容易维护。在实际开发过程中，你可能需要根据具体情况调整配置和请求处理逻辑。