FlyHttp 的使用：如何高效使用 FlyHttp，支持 JS、TS 项目

简介

FlyHttp 是一个通用的 JS 包，原则上你可以在任何能运行 JavaScript 的地方使用，不依赖于任何的前端框架！

目的在于省略某些大量重复代码，少量配置化代码，即可实现极速开发体验！

NPM 仓库地址https://www.npmjs.com/package/@anyup/flyit

1. 安装

npm install @anyup/flyit -S

2. 使用

2.1 在 Vue / React 中使用 (axios)

import { FlyHttp } from '@anyup/flyit'

// 1. 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.demo.com',
  timeout: 20000,
  headers: { 'Content-type': 'application/json' }
})

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(axiosInstance)

// 3. 定义 URL 配置表
const urls = {
  login: { url: '/login', method: 'POST' }
}

// 4. 分发 URL
const api = flyHttp.dispatch(urls)

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: 'admin' } })
}

2.2 在 h5 / browser 中使用 (jQuery ajax)

复制 dist 文件夹下的 flyit.umd.js文件，或使用 cdn 线上地址，引入现有的项目中。

cdn 地址引入方式如下

<!-- 最新版 -->
<script src="https://unpkg.com/@anyup/flyit/dist/flyit.umd.js"></script>

<!-- 指定版本号 -->
<script src="https://unpkg.com/@anyup/flyit@1.0.2/dist/flyit.umd.js"></script>

以使用 jquery 的 ajax 请求为例：

<script src="dist/flyit.umd.js"></script>
<script src="dist/jquery.min.js"></script>

<script>
  const { FlyHttp } = Flyit

  const baseURL = 'https://api.demo.com'
  const headers = { 'Content-type': 'application/json' }

  // 1. 创建 ajax 实例
  function ajaxRequest({ url, method, data, success, fail, complete }) {
    jQuery.ajax({
      url: `${baseURL}${url}`,
      type: method,
      data,
      dataType: 'json',
      headers,
      success: success,
      error: fail,
      complete: complete
    })
  }

  // 2. 创建 FlyHttp 实例
  const flyHttp = new FlyHttp.Builder(config => {
    const { url, method, data } = config
    return ajaxRequest({ url, method, data })
  })

  // 3. 定义 URL 配置表
  const urls = {
    login: { url: '/login', method: 'POST' }
  }

  // 4. 分发 URL
  const api = flyHttp.dispatch(urls)

  // 5. 页面接口
  const login = () => {
    api.login({
      data: { username: 'admin' },
      success: res => {
        console.log('success', res)
      },
      fail: res => {
        console.log('fail', res)
      },
      complete: res => {
        console.log('complete', res)
      }
    })
  }
</script>

2.3 在 uni-app 中使用

在 uni-app 框架中，以官方提供 uni.request 网络请求为例，我们来看一下如何使用：

import { FlyHttp } from '@anyup/flyit'

const baseURL = 'https://api.demo.com'
const headers = { 'Content-type': 'application/json' }

// 1. 创建 request 实例
function uniRequest({ url, method, data }) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: `${baseURL}${url}`,
      data,
      method,
      dataType: 'json',
      header: headers, // 请求头信息
      success: res => {
        resolve(res.data)
      },
      fail: e => {
        reject(e)
      }
    })
  })
}

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(uniRequest)

// 3. 定义 URL 配置表
const urls = {
  login: { url: '/login', method: 'POST' }
}

// 4. 分发 URL
const api = flyHttp.dispatch(urls)

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: 'admin' } })
}

2.4 在 node 中使用

ESM 模块规范

import { FlyHttp } from '@anyup/flyit'

// 1. 创建 http 实例
const httpInstance = {}

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(httpInstance)

// 3. 定义 URL 配置表
const urls = {
  login: { url: '/login', method: 'POST' }
}

// 4. 分发 URL
const api = flyHttp.dispatch(urls)

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: 'admin' } })
}

CJS 模块规范

const { FlyHttp } = require('@anyup/flyit')

// 1. 创建 http 实例
const httpInstance = {}

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(httpInstance)

// 3. 定义 URL 配置表
const urls = {
  login: { url: '/login', method: 'POST' },
  logout: { url: '/logout', method: 'POST' }
}

// 4. 分发 URL
const api = flyHttp.dispatch(urls)

// 5. 页面接口
const login = () => {
  return api.login({ data: { username: 'admin' } })
}

参考第 2.2 部分，在 h5 / browser 中使用，使用 ajax 的构建方案!

// 1. 创建 ajax 实例
function ajaxRequest({ url, method, data, success, fail, complete }) {
  jQuery.ajax({
    url: `${baseURL}${url}`,
    type: method,
    data,
    dataType: 'json',
    headers,
    success: success,
    error: fail,
    complete: complete
  })
}

// 2. 创建 FlyHttp 实例
const flyHttp = new FlyHttp.Builder(config => {
  const { url, method, data } = config
  return ajaxRequest({ url, method, data })
})