gx-instant

# 异步请求

# 说明

异步请求模块包含了一些常用的异步请求发送方法，导出模块名为req

此模块的请求方法对于复杂的请求功能并不合适，因为它没有如axios的一些如请求拦截器，和响应拦截器的概念，因此如果需要更复杂场景，推荐 使用其他请求库，如axios

此模块的目标为服务一些简单场景如静态页面，或者一些小型应用；或者为了快速测试后端接口功能等

# 方法

# get

说明：GET请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • query：Object URL查询字符串
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • abort：AbortController 可选，可用于取消请求的控制器实例
    • xhr；XMLHttpRequest 可选，用于发送请求的XMLHttpRequest实例，同时也可用来取消xhr请求
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Promise 包含请求结果的Promise

# post

说明：POST请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • query：Object URL查询字符串
    • params：Object 请求体中携带的请求参数，POST和PUT请求有效
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • abort：AbortController 可选，可用于取消请求的控制器实例
    • xhr；XMLHttpRequest 可选，用于发送请求的XMLHttpRequest实例，同时也可用来取消xhr请求
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Promise 包含请求结果的Promise

示例

post({
  url:'xxxxxxx',
  params:{name:'tom'}
}).then(res=>{
  //成功回调
}).catch(err=>{
  //错误回调
})

# put

说明：PUT请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • query：Object URL查询字符串
    • params：Object 请求体中携带的请求参数，POST和PUT请求有效
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • abort：AbortController 可选，可用于取消请求的控制器实例
    • xhr；XMLHttpRequest 可选，用于发送请求的XMLHttpRequest实例，同时也可用来取消xhr请求
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Promise 包含请求结果的Promise

# del

说明：Delete请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • query：Object URL查询字符串
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • abort：AbortController 可选，可用于取消请求的控制器实例
    • xhr；XMLHttpRequest 可选，用于发送请求的XMLHttpRequest实例，同时也可用来取消xhr请求
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Promise 包含请求结果的Promise

# req

说明：通用请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • method：string string 请求方法，可选，默认GET，可取值GET、POST、PUT、DELETE，大小写不敏感
    • query：Object URL查询字符串
    • params：Object 请求体中携带的请求参数，POST和PUT请求有效
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • abort：AbortController 可选，可用于取消请求的控制器实例
    • xhr；XMLHttpRequest 可选，用于发送请求的XMLHttpRequest实例，同时也可用来取消xhr请求
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Promise 包含请求结果的Promise

示例

req({
  url:'xxxxxx',
  method:'GET' //大小写不敏感
})
//可以显示指定请求方式
req({
  url:'xxxxxx',
  method:'GET',
  api:'xhr'
})
//通过外部传入控制器，来取消请求
let abort = new AbortController()
req({
  url:'xxxxxx',
  method:'GET',
  api:'fetch',
  abort
})
//取消请求
abort.abort()
//或者请求为xhr模式时
let xhr = new XMLHttpRequest()
req({
  url:'xxxxxx',
  method:'GET',
  api:'xhr',
  xhr
})
//取消请求
xhr.abort()

提示

  • req方法默认使用fetch发送请求，如果fetch不支持，则降级使用xhr发送请求
  • 如果req显示指定了请求方式，api为xhr或fetch时，则使用指定的请求方式发送请求，无法发送会提示警告
  • 需要请求取消，可以使用reqEnhance，也可以在外部创建AbortController实例（fetch下模式下有效），也可以传入XMLHTTPRequest实例（xhr模式下有效）

# reqEnhance

说明：增强通用请求方法

版本：1.1.1

  • 参数
    • url：string 请求的URL
    • method：string string 请求方法，可选，默认GET，可取值GET、POST、PUT、DELETE，大小写不敏感
    • query：Object URL查询字符串
    • params：Object 请求体中携带的请求参数，POST和PUT请求有效
    • headers：Object 请求头信息
    • timeout：number 超时时间，可选，默认3000毫秒
    • api：string 底层的请求方式，可选，默认fetch，可取值fetch、xhr
  • 返回：Object 返回一个对象，格式为{abort:Function,promise:Promise}；其中abort方法可取消正在执行的请求，promise用于获取接口返回数据

示例

const {abort,promise}  = reqEnhance({
    url:'xxxxx',
    method:'post',
    api:'fetch',
    params:{
      name:'tom'
    },
    query:{
      id:123,
      age:14
    }
})
//返回的abort可用来在请求未完成时取消请求
abort()
//promise可用来接收请求的返回结果
promise.then(res=>{
  //成功处理
}).catch(err=>{
  //错误处理
})

← 通用工具 →