0.0.2 • Published 6 years ago
charm-fetch v0.0.2
charm-fetch 使用文档
是一款迷人的js请求工具,可以方便地进行js请求
工具会检测环境是否支持fetch,不支持就使用XMLHttpRequest
由于fetch不支持显示上传进度,所以上传文件一律采用XMLHttpRequest
支持restful
,可以使用GET,POST,DELETE,PUT,PATCH方法
支持Promise
异步请求,可以使用then方法或者await/async
工具会在每次请求中自动在url后中添加随机数参数(参数名默认为_r),避免低版本出现接口缓存问题
安装与配置
$ npm install -g charm-fetch #全局安装
$ npm install --save-dev charm-fetch #局部安装
用法
用法请参照例子文件夹下
charm-fetch
两种使用方法
- api配置使用
- 传统请求
api配置使用
用于创建一个api请求实例,同一个服务器的请求可以统一使用
CFetch.create(key,[options])
参数
- key 实例的唯一键,根据key可以拿到配置过的实例
option
url
基地址,api服务器的地址 例:http://localhost:3000/request
api请求前的回调函数,可以在这里统一传递公共参数 例如:tokenresponse
api请求响应后,对数据进行处理后返回,必须有返回 返回值将会传递给then的第一个参数header
请求头timeout
过期时间returns
返回api请求对象
//导入包
import CFetch from 'charm-fetch';
/**
* 此方法可以创建多个实例,
* 创建实例自动返回api实例
**/
let api = CFetch.create("api", {
//基地址 所有请求都会拼接此地址
url: 'http://localhost:3000/',
//请求之前的回调函数,可以处理在请求前统一传递公共参数或header
onRequest: function (req) {
},
/**
*请求完成后的回调函数,针对api接口可以统一对响应进行处理后返回
*返回数据将被then方法或await接收
**/
onResponse: function (res) {
}
})
获取请求对象
//通过getInstance获取指定的api实例
let api = CFetch.getInstance("api");
例子
let user = {
list: api.get("/list/"),//获取用户列表
add: api.post("/add/"),//添加用户
update: api.put("/put/"),//修改用户基本信息
patch: api.patch("/patch/"),//更新用户部分信息
delete: api.delete("/delete/"),//删除用户
uploadAvatar: api.upload("/uploadAvatar/", {
method: 'POST'//指定请求方法 默认POST 不能是get
}),//上传头像
download: api.download("/download/", {
method: 'POST'//指定请求方法 默认GET
}),//下载文件
}
//1.使用then方法获取数据
user.list().then((res)=>{
let list = res.data;//接口返回数据
}).catch((err)=>{
//错误信息
//...
})
//2.使用await/async获取数据
let list = await user.list();
异步上传/下载文件
//上传文件
//1.then方法
user.uploadAvatar({
file
},function(current,total){
//文件上传进度
}).then((res)=>{
//响应回调
})
//2.await/async
let result = await user.uploadAvatar({
file
},function(current,total){
//文件上传进度
})
//下载文件
//1.then方法
user.download({
file
},function(current,total){
//文件下载进度
}).then((res)=>{
//响应回调
})
//2.await/async
let file = await user.download({
file
},function(current,total){
//文件下载进度
})
传统请求
使用方法
//导入包
import {request} from 'charm-fetch';
request({
url:'http://localhost:3000',
method:'POST',
}).then((res)=>{
//响应数据
}).catch((err)=>{
//捕获异常
})
异步上传或下载
//导入包
import {upload,download} from 'charm-fetch';
//上传文件
upload({
url:'http://localhost:3000',
method:'POST',
},function(){
//文件上传进度
}).then((res)=>{
//响应数据
}).catch((err)=>{
//捕获异常
})
//下载文件
download({
url:'http://localhost:3000',
method:'POST',
},function(){
//文件下载进度
}).then((res)=>{
//响应数据
}).catch((err)=>{
//捕获异常
})
fetch请求终止
//1.then方法
//bind方法
//obj表示对象,当obj为null时,本工具就会自动终止请求
user.add().bind(obj).then(()=>{
//响应回调
})
//ref方法
let a ={};
let ref = user.add().then();
//使用abort手动结束请求
ref.abort("结束原因");
//2.await
//bind
//obj表示对象,当obj为被销毁后,本工具就会自动终止请求
let result = await user.add({},{
bind:obj
})
//ref方法
let a ={};
let result = await user.add({},{
ref:a.ref
})
//使用abort手动结束请求
a.ref.abort("结束原因");