Fox Plugins

集成了服务请求和h5和native间交互的桥接

Install

NPM

npm i @fox-js/fox-plugins -S

YARN

yarn add @fox-js/fox-plugins

pnmp

pnpm add @fox-js/fox-plugins

使用指南

步骤一.创建并初始化

import { createFoxPlugins } from '@fox-js/fox-plugins'

// 参数
const options = {
   // 应用名称
  app: 'fox_base',
  // 请求URL
  url: '127.0.0.1:9705',
  // 是否启用SSL
  ssl: false,
  // debug请求URL
  // debug_url: '192.144.128.218:9292',
  // 是否启用debug SSL
  // debug_ssl: false,
  // web socket 通信方式
  webSocketType: 'get',
  // 调试模式
  debugModel: false,
   // 调试范围
  debugScope: ['fox.service', 'fox.device', 'fox.file', 'fox.native']
}

// 创建fox plugins
const FoxPlugins = createFoxPlugins(options)

// 注册到vue app中
createApp(App).use(FoxPlugins)..mount('#app')

步骤二.获取api

import { useFoxPluginsComposer } from '@fox-js/fox-plugins'

// 获取plugin api
const { service } = useFoxPluginsComposer()

```<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-06-03 08:29:42
-->

# Fox Plugins

Fox Shell的桥接接口

## Install

### NPM

```shell
npm i @fox-js/fox-plugins -S

YARN

yarn add @fox-js/fox-plugins

使用指南

步骤一.创建并初始化

import { createFoxPlugins } from '@fox-js/fox-plugins'

// 设置配置
const options = {
  // 请求URL
  url: '127.0.0.1:9705',
  // 是否启用SSL
  ssl: false,
  // 消息服务地址(WebSocket)
  // msgServiceType: 'WS',
  // msgServiceUrl: 'ws://127.0.0.1:3000/ws/register'
  // 消息服务地址(SSE)
  msgServiceType: 'SSE',
  msgServiceUrl: 'http://127.0.0.1:3010/api/common/message/sse/register',
  // 埋点上报地址
  traceReportUrl: 'http://127.0.0.1:3010/fdp-collect-provider/api/trace/log'
}


// 创建fox plugins
const FoxPlugins = createFoxPlugins(options)

// 注册到vue app中
createApp(App).use(FoxPlugins)..mount('#app')

步骤二.获取api

import { useFoxPluginsComposer } from '@fox-js/fox-plugins'

// 获取plugin api
const { service } = useFoxPluginsComposer()

服务请求

过滤器

用于拦截服务的请求、响应过程，目前支持同步过滤器（推荐）和异步过滤器

导入接口

import { Filter, RequestFilterEvent, ResponseFilterEvent, FoxPlugins } from '@fox-js/plugins'

过滤器接口

/**
 * 过滤器
 */
interface Filter {
    /**
     * 请求前过滤处理
     * @param event
     */
    before?(event: RequestFilterEvent): boolean | Promise<boolean>;
    /**
     * 响应滤处理
     * @param event
     */
    after?(event: ResponseFilterEvent): boolean | Promise<boolean>;
    /**
     * 响应异常过滤处理
     * @param event
     */
    exception?(event: ResponseFilterEvent): boolean | Promise<boolean>;
}

方法及参数类型说明

• before 请求拦截

可以对请求的数据进行统一处理，例如加入统一的报文头，返回true或Promise,表示处理完成，true处理成功继续发起请求，false处理失败中断发起请求

• after 响应拦截

可以对响应的数据进行统一处理，例如解构响应报文，返回true或Promise,表示处理完成，true处理成功继续传递，false处理失败中断传递

• exception 异常拦截

可以对异常情况进行统一处理

RequestFilterEvent

interface RequestFilterEvent extends Result {
    all: Record<string, any> //请求配置和数据合集
    data: any // 请求数据
}

ResponseFilterEvent

interface RequestFilterEvent extends Result {
    header: Record<string, string> //响应头
    data: any // 响应数据
}

服务请求

// 获取service
const { service } = useFoxPluginsComposer(scope, proxy)

// 获取reqeust方法
const request = useRequest()
const ret = await service.request({
    path: '/api/login',
    data: {
      userId: '007'
    }
  })

if (ret.code == 0) {
  //成功处理
}else{
  // 错误处理
}

request参数

JSON对象 属性说明： 参数 | 类型 | required | 说明 -|-|-|- id | String | false | 服务ID(防止重复提交) path | String | true | 服务路径 url | String | true | 服务URL data | Json | true | 请求数据 contentType | String | false | 内容类型，默认application/json timeout | Number | false | 超时(毫秒) cover | Boolean | false | 是否打开loading界面，默认true headers| Json | false | Http扩展头 method | String | POST | 请求类型(POST,GET)s

备注：

1. id 用于防止重复提交，也就是在如果两个服务的ID一致，那么在有一个服务未返回，那么另一个服务的提交是无效的。
2. path 服务路径，格式“/路径”或者“路径”，当路径前面没有/，那么框架回自动给路径加入应用名，如“路径”->"/appName/路径"，name和path的关系，是path会覆盖name，也就是path>name
3. url 完整服务URL url>path>name
4. data 请求数据，格式为json对象
5. contentType 内容类型，常用类型application/json，text/plain
6. time 请求超时设置，单位为毫秒，默认60000毫秒
7. cover 是否打开loading界面，默认false
8. headers json对象，内容是http扩展头
9. method http请求方式，可选择 GET，POST

返回值

JSON对象

Json对象，属性如下 --- code 0为正常，1为取消，2为错误，3为进程，4为超时，其它错误 --- message 错误消息 --- data 响应数据

native调用

fox-plugin提供了h5和shell的桥接

import { useGlobalFoxPluginsComposer, Result, Native, Device } from '@fox-js/plugins'

const params = []

 const fn = (status: number, data: any) => {
    // 成功标志 NOT_RESULT = -1
    // 成功标志  SUCCESS = 0
    // 取消标志 CANCEL = 1
    // 失败标志 ERROR = 2
    // todo
 }
// 参数
const args = {
   service,
   action,
   data: params,
   async: true,
  callback: fn
}

// 获取plugins composer
const pluginsComposer = useGlobalFoxPluginsComposer()
if (!pluginsComposer) {
   const errorMsg = '获取plugin composer失败'
   console.error(errorMsg)
   fn(ErrorFlagValue, errorMsg)
   return
}
const bridge = pluginsComposer.bridge
return bridge.exec(args)