fetch的用法ajax,GitHub - cy904159293/http-fetch: 使用fetch代替ajax请求

http-fetch

使用fetch代替ajax请求

安装

npm install http-fetch

使用

import httpFetch from 'http-fetch'

// 发起一个get请求

httpFetch.get('/users')

.then(response => console.log(response))

配置

onError

全局错误处理。

httpFetch.onError = error => console.dir(error)

Error对象

{

url: '请求地址',

body: '请求参数',

method: '请求方法',

status: 'http返回码',

data: '请求结果',

type: 'httpFetchError'

}

onRequest

请求提交的拦截器。一般用于修改提交参数/终止请求

// 修改提交参数

httpFetch.onRequest = (request, next) {

request.body = '...'

next()

}

// 终止请求

httpFetch.onRequest = (request, next) {

// 传入任意非undefined参数表示终止请求并立即resolve你传入的参数

next('不给你请求!')

}

Request对象

{

url: '请求地址',

body: '请求参数',

method: '请求方法',

options: '请求配置'

}

onResponse

请求返回的拦截器。一般用于修改返回参数/返回自定义异常

// 修改返回参数

httpFetch.onResponse = (response, next) => {

response.data = '...'

next()

}

// 返回自定义异常

// 请认真看下面错误对象的定义过程

// 抛出的异常会正常走全局onError => 局部catch的流程

httpFetch.onResponse = (response, next) => {

var data = response.data

if (data.hasOwnProperty('err_msg')) {

var error = Error(data.err_msg)

// httpFetch仅会处理type = 'httpFetchError'的错误,否则抛出

error.type = 'httpFetchError'

throw error

} else next()

}

Response对象

{

url: '请求地址',

body: '请求参数',

method: '请求方法',

options: '请求配置',

data: '请求结果'

}

**next([resolveData])**方法

你可以传入一个参数来代替本次的Response

httpFetch.onResponse = (response, next) => {

if (response.url === '/hello') next({msg: 'hello'})

else next()

}

httpFetch.get('/hello')

.then(response => {

// response: {msg: 'hello'}

})

cache

应用层缓存。默认false(仅缓存'get', 'head', 'jsonp'这三种请求)

// 同一个请求会从缓存中取,除非刷新了页面。

httpFetch.cache = true

// 你也可以设置一个超时时间(单位:毫秒),过期则重新获取

httpFetch.cache = 3600000

loading

获取数据的等待提示。用于给所有请求添加等待提示。

// 配置获取数据的等待提示

httpFetch.loading = {

show () {

// 这里写等待提示的显示方法

// 您可以return一个数据(通常是您的Toast实例)该数据会被hide方法接收

},

hide (showResult) {

// 这里写等待提示的关闭方法

// showResult:show方法返回的数据

}

}

requestOptions

// 注意:method和body配置项你无法修改,因为这两项已经默认在你的请求方法中了

httpFetch.requestOptions = {

headers: {

// 配置请求头

},

// 配置跨域模式

mode: 'no-cors'

}

默认行为

所有Response.data||Error.data优先转成json格式

如果600毫秒内没有返回数据才会调用loading.show()

'Content-Type': 'application/x-www-form-urlencoded'

'Cache-Control': 'no-cache'

'X-Requested-With': 'XMLHttpRequest'

credentials: 'same-origin'

jsonp请求的回调参数名为'callback'

请求方法

get (url, [option])

head (url, [option])

jsonp (url, [option])

delete (url, body, [option])

post (url, body, [option])

put (url, body, [option])

patch (url, body, [option])

url

请求地址

body

option

{

// 错误处理模式 0:交给全局onError处理 1:本次请求自行catch处理 2:全局onError+自行catch处理 默认:0

errMode: 0,

// 是否走全局request拦截器 默认:true

hookRequest: true,

// 是否走全局response拦截器 默认:true

hookResponse: true,

// 本次请求是否显示等待提示 默认:true

loading: true,

// 本次请求的缓存配置 默认:全局cache配置

cache: true,

// 本次请求的fetch request配置 默认:全局requestOptions配置

requestOptions: {

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

}

}

cache的检测机制是通过对比request.url和request.method是否相同来决定是否复用

其他方法

jsonToUrlParams (json)

用于将json对象转成url参数

var json = {

name: '张三',

age: 18

}

console.log(httpFetch.jsonToUrlParams(json))

// 返回:'name=张三&age=18'

兼容问题

如果浏览器原生不支持fetch方法,在使用本插件之前,先在您项目的入口文件中引入一次Fetch Polyfill即可解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值