umijs / umi-request Goto Github PK
View Code? Open in Web Editor NEWA request tool based on fetch.
A request tool based on fetch.
当我使用原生fetch下载文件的时候是成功的,但是换成umi-request就报
20:1 Uncaught (in promise) SyntaxError: Unexpected token @ in JSON at position 0
错误。
import request from 'umi-request';
const reqUrl = `${SERVER_PRX}/contractTaskAttachment/downLoad/${attachmentId}`;
const AUTHTOKEN = localStorage.getItem('auth_token') || '';
request(reqUrl, {
responseType: 'blob',
headers: {
Authorization: `Bearer ${AUTHTOKEN}`,
},
})
.then(res => res.blob())
.then(res => {
const content = res;
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
});
将request换成fetch就成功了。
目前 request.interceptors.request.use((url, options)
里的 url
还需要拼接..
想要实现统一修改server返回数据的格式,例如首字母都改成小写。
拦截器似乎无法修改到data,有没有合适的办法来实现这个功能呢?
谢谢。
服务端停了前端会请求出错 (net::ERR_CONNECTION_REFUSED)
但是没法处理,errorHandler里的error信息就一个字符串(TypeError: Failed to fetch)
还想通过url判断下结果获取不到,没有options信息。
是我用的不对还是errorHandler就这么简单
比如想axios中:
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
Line 65 in 3346cd3
这一行 handler返回的应该是一个Promise<RequestResponse>吧
如果服务端返回的是302,我想获取redirect的url,也就是获取Response Headers中的location 的值该如果处理?
传递的data为数组时,代码里面校验Object.prototype.toString.call(data) === "[object Object]" 是有问题的,
应该加上[object Array]这个校验才对,[{foo:"bar"}]也属于json类型
可以更加简化使用 request,但这样好不好?
// 使用缓存, 只有get时有效. 单位毫秒, 不加ttl默认60s, ttl=0不过期. cache key为url+params组合
request('/api/v1/some/api', { params: { hello: 'world' }, useCache: true, ttl: 10000 });
这个使用后,试缓存再那里的呢?浏览器的localStorage我没有看到,谢谢:)
调用请求拦截器request.interceptors.request.use
方法,在拦截器中为每个请求header
添加token
,因为localforage
读取token
是异步操作,将读取到的值设置到header
中不会成功。
见代码:
// request拦截器
request.interceptors.request.use(async (url, options) => {
options.headers.Authorization = '123';
const token = await '456'; // 模拟localforage.getItem('token')异步操作
options.headers.Authorization = token;
console.log(options.headers.Authorization);
// 这里打印出来的Authorization值是正确的'456',
// 真实请求中的Authorization值仍然还是'123'
// 相同的操作换成axios没有问题
return {url, options};
});
可以在 README 里加一个表格
method等于delete时没有包装一下?当删除多条记录的时候需要在body提交数据
--> options.body = JSON.stringify(data);
nice lib, 不过目前没看到有关于cancellation的内容,有考虑支持么?谢谢
有个项目打算用RN重构。
请求用原生的fetch是可以的。
不知道umi-request基于 fetch的封装,在rn内使用是否有支持,亦或者注意事项,谢谢
目前提供的 errorHandler 只能根据状态码来判断是否出错,但是很多后端 API 错误没有基于状态,直接 json 里通过 errorCode 或者 success 来标识,所以很多开发者不知道如何处理,我们现在推荐的是通过 interceptor 来做,但是拦截器拦截的错误还是会走到 errorHandler,不优雅也不好用。
增加一个 errorChecker 或者叫 errorDetector,识别错误
const errorHandler = error => {
}
// 200 需要识别的错误, 如果是错误继续进入 errorHandler
const errorChecker = data => {
return !data.success || someStatus === 'failed';
}
const request = extend({
errorChecker, // 只有需要检查 200 错误才加,有状态的错误还是走之前逻辑。
errorHandler, // 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
});
你们觉得如何?有没有更好的方案和意见
因为服务端的接口返回是{ code:0,message:"string",data:{}}
我们在拦截器中根据code和message进行处理错误
然后业务中只需要取data就行了,
拦截器中我试了一下,返回response以外的都会undefined
目前在model层面是每一个response都取response.data的,不知道是否有什么好的办法
errorHandler
,那么我要在 errorHandler
里怎么判断这是超时错误?我现在是根据 error.message
里的 timeout
,这样感觉不靠谱。Promise
还是会被 resolve
。这个很奇怪,超时时应该已经 reject
掉了,为什么还会再 resolve
?请求头不对,network 显示的是一个小写的 patch,服务端接收不到。
换成 fetch 就没问题。
return window.fetch(`/api/users/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(values),
});
post 使用form-data方式转化有点问题的.
1.不支持三级对象.
2.数组会丢失,自动转成对象. 如,{cheked:[1,2,3]} 会转化成 checked:1 && checked:2 checked:3 ,应该是
checked[]:1 && checked[]:2 checked[]:3
3.json字符串,自动转成对象,我要的传字符串. 如 {mjson:"{a:11.b:22}"} 自动转成 mjson:object
这些都不是友好的使用方式.
post,put 请求类型处理太暴力了,请求类型有,"form-data","x-www-form-urlencoded","raw","binary"
raw 分 "json","text","html","javascript","xml"
然而umi-request 只支持 "form" || "json".
参照案例response interceptor;使用response.headers.append时错误提示read property 'headers' of undefined
ReferenceError: window is not defined
目前 requestType 可选值:
json //对应 Content-Type:application/json
form //对应 Content-Type:application/x-www-form-urlencoded
期待增加,multipart/form-data
hello~断网情况下发送请求,使用
这三种方式拦截,打断点都没走,请问是我的拦截方式不对吗
@sorrycc
request.interceptors.response.use((res, options) => {
//返回的res并不是实际后端返回的数据,要怎么拿到实际的数据啊
if (
res.ret === -1 &&
(res.code === 'FALL' ||
res.code === 'SSO_FALL' ||
res.code === 'NO_PERMISSION' ||
res.code === 'ILLEGAL_REQUEST')
) {
router.push('/403');
} else if (res.ret === -1 && res.code === 'NO_LOGIN') {
goLogin();
}
return res;
});
统一拦截 reponse 判断是否登录
目前在 response interceptor 中获取过响应体的内容后,后面就没办法再获取到响应体的内容了,是否考虑在 interceptor 中支持把解析后的响应体往后传递
想在token过期时无感知的刷新token并继续执行原有的操作,在errorHandler中捕获到401错误,刷新token成功后,再次调用原先请求,但是没有post请求body里面的参数,请问这个有什么更好解决办法嘛?如果使用response拦截器的话,重新请求了接口还是会再走一遍errorHandler函数,在yield call()中得不到正确的返回结果...
使用中间件处理请求,返回的接口如下,在其他issue里面有说通过headers,能过拿到响应头。但是好像没找见。
如题
用 webpack external umi-request, 全局对象名字是?
还是 umi-request 当前没法外部引用?只能打包进去?
谢谢
umi-request是基于fetch的封装,当上传文件时,如何对上传文件的进度进行监听呢,像xhr.upload.onprogress
我用ant-design-pro搭建后台管理系统,使用的是umi-request 是1.0.4,但是发现 每次查询返回的数据是对的 但是response.headers 都是空,而真实返回的头是有的 。 我们的服务器返回的response headers 包括Link , 以及一些自定义的headers 形如X-(...)的header , 但就是在response拦截器中看不到这个数据
背景umi-request version 1.2.11 , chrome 78.0.3904.108
请求方式
import { extend } from 'umi-request';
// errorHandler 拷贝的 ant-design-pro
const request = extend({
errorHandler,
credentials: 'include',
});
const response = request('/proxy/login', {
method: 'POST',
data: params,
})
问题 怎么方便的获取后台服务返回的文本?
简单的事情搞这么复杂,一不小心就踩一个坑,一个umi-request这几天踩了无数坑。浪费了太多时间,用的我开始怀疑人生,感觉jquery时代比这都强百倍。客观评价,不吹不黑
umi-request/src/middleware/fetch.js
Line 45 in 2bc3113
假取消优点是什么?axios和fetch都可以做到终止请求的,所以我不理解为什么要用已经撤销了的方案?
在typescript中使用。
errorHandler: (error) => {
// 集中处理请求错误
const { response = {} } = error; ------->error:类型“Error”上不存在属性“response”
const { status } = response;
console.warn('error', error);
let errorMessage = '请求错误,请重试!';
switch (status) {
case 500:
errorMessage = '服务器异常';
break;
default:
break;
},
requestType: "json",
headers: {
accept: "application/json",
content-type: "application/json"
}
请求头内容如上,
发起请求时,实际得到的请求头为
Accept: application/json; ,application/json
Content-Type: application/json;UTF-8 , application/json
手动设置的与默认的自动拼接到一起,中间还有个逗号
只有当accept 和 content-type 大小写完全一致时才不会出现该错误
发送前设置并打印显示是application/json
const request = extend({
errorHandler, // 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
mode: 'no-cors',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
chrome的network中看到的却是:Content-Type: text/plain;charset=UTF-8
求解
errorHandler里面的response只有contentType和caontentLength能拿到,其他头部值都没有
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.