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即可解决。