• 轻量且强大的 uni-app http 网络库 - 掘金

    anyup design

    一个基于 promise 的，轻量且强大的 http 网络库

    🔥 文档网站（国内） 🔥 文档网站（国外源）

    简介

    🚀 基于 promise 的 uni.request ，轻量且强大的 http 网络库：

    1. 提供统一的 Promise API。
    2. 浏览器环境下，轻量且非常轻量 。
    3. 基于uni.request，支持多种运行环境。
    4. 支持请求／响应拦截器。
    5. 自动转换 JSON 数据。
    6. 支持批量生成API请求，简化代码量99%，一行代码搞定

    安装

    // 安装
npm install @anyup/uni-http -S

// 更新
npm update @anyup/uni-http
复制代码

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    一、快速上手

    import { Http } from '@/uniui/index.js'

const http = new Http().setBaseURL('').setHeader({ 'Content-Type': 'application/json;charset=UTF-8' })

// 请求示例
requestLogin(username, password) {
	http.request('/login', { username, password }).then(res => {

	})
}

// es6 await风格
async requestLogin(username, password) {
	await http.request('/login', { username, password })
}

// 上传文件示例，上传文件封装的uni.uploadFile
async uploadFile() {
	await http.upload('/upload', { filePath: 'file', , name: 'fileName', formData: {} } )
}
复制代码

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    二、进阶，按需批量生成API，体验飞一般的感觉

    1.初始化 Http 类

    // http.js
import { Http } from '@/uniui/index.js'

const header = {}
const baseURL = ''
const http = new Http().setBaseURL(baseURL).setHeader(header)

// 请求拦截器
http.interceptors.request.use(
  request => {
    if (request.loading) {
      // 如果配置了loading，显示
    }
    // 设置请求header
    request.header['Authorization'] = ''
    return request
  },
  error => Promise.resolve(error)
)
// 响应拦截器
http.interceptors.response.use(
  response => {
    // 请求成功
    if (!response.data) {
      return Promise.reject(new Error('接口请求未知错误'))
    }
    // 其他业务处理
    return Promise.resolve(response)
  },
  error => {
    // 请求失败，业务处理
    return Promise.reject(error)
  },
  complete => {
    // 请求完成
    if (complete.request.loading) {
      // 如果配置了loading，关闭
    }
    // 其他业务处理
    console.log('complete', complete)
  }
)

export default new Http.Builder(http)
复制代码

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    2.定义接口配置

    // api.js
import http from './http'

const urls = {
  // 用户
  login: { url: '/api/login', method: 'POST', loading: true } // 用户登录
}

export default http.dispatch(urls)
复制代码

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    3.使用方式

    // demo.vue