Giter VIP home page Giter VIP logo

umi-request's Issues

如何下载application/octet-stream文件?

当我使用原生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就成功了。

如何处理 net::ERR_CONNECTION_REFUSED

服务端停了前端会请求出错 (net::ERR_CONNECTION_REFUSED)
但是没法处理,errorHandler里的error信息就一个字符串(TypeError: Failed to fetch)
还想通过url判断下结果获取不到,没有options信息。
是我用的不对还是errorHandler就这么简单

data为Array时会有问题

传递的data为数组时,代码里面校验Object.prototype.toString.call(data) === "[object Object]" 是有问题的,
应该加上[object Array]这个校验才对,[{foo:"bar"}]也属于json类型

关于useCache: true, ttl: 10000一些疑问

// 使用缓存, 只有get时有效. 单位毫秒, 不加ttl默认60s, ttl=0不过期. cache key为url+params组合
request('/api/v1/some/api', { params: { hello: 'world' }, useCache: true, ttl: 10000 });

这个使用后,试缓存再那里的呢?浏览器的localStorage我没有看到,谢谢:)

请求拦截器中回调使用异步操作无法修改options的值

调用请求拦截器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};
});

cancellation support?

nice lib, 不过目前没看到有关于cancellation的内容,有考虑支持么?谢谢

form请求问题

requestType:'form',设置这种后,请求参数为数组时,请求参数没有下标,变成这样
image
但是后端不识别,如何让请求参数变成下边这种带下标的结构
image

该库可以直接用于RN么

有个项目打算用RN重构。

请求用原生的fetch是可以的。

不知道umi-request基于 fetch的封装,在rn内使用是否有支持,亦或者注意事项,谢谢

更好的处理 200 error

背景

目前提供的 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
});

你们觉得如何?有没有更好的方案和意见

@sorrycc @yesmeck @afc163 @yutingzhao1991 @zhanba

有没有办法在拦截器里直接返回response.data

因为服务端的接口返回是{ code:0,message:"string",data:{}}
我们在拦截器中根据code和message进行处理错误
然后业务中只需要取data就行了,
拦截器中我试了一下,返回response以外的都会undefined
目前在model层面是每一个response都取response.data的,不知道是否有什么好的办法

处理超时的最佳实践?

  1. 现在超时会调用的话会走到 errorHandler,那么我要在 errorHandler 里怎么判断这是超时错误?我现在是根据 error.message 里的 timeout,这样感觉不靠谱。
  2. 现在超时触发后,如果请求回来了,这个请求的 Promise 还是会被 resolve。这个很奇怪,超时时应该已经 reject 掉了,为什么还会再 resolve?

method=PATCH 时有问题

请求头不对,network 显示的是一个小写的 patch,服务端接收不到。

换成 fetch 就没问题。

return window.fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(values),
});

form 转化有问题

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".

requestType 期待增加 multipart/form-data

目前 requestType 可选值:

json  //对应 Content-Type:application/json
form //对应 Content-Type:application/x-www-form-urlencoded

期待增加,multipart/form-data

断网下拦截不成功

hello~断网情况下发送请求,使用
image
image
image
这三种方式拦截,打断点都没走,请问是我的拦截方式不对吗
@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;
});

response拦截器

场景

统一拦截 reponse 判断是否登录

问题

目前在 response interceptor 中获取过响应体的内容后,后面就没办法再获取到响应体的内容了,是否考虑在 interceptor 中支持把解析后的响应体往后传递

errorHandler 的error中没有request请求的参数?

想在token过期时无感知的刷新token并继续执行原有的操作,在errorHandler中捕获到401错误,刷新token成功后,再次调用原先请求,但是没有post请求body里面的参数,请问这个有什么更好解决办法嘛?如果使用response拦截器的话,重新请求了接口还是会再走一遍errorHandler函数,在yield call()中得不到正确的返回结果...

上传文件

使用 application/x-www-form-urlencoded; charset=utf-8 请求实体为 formData 但多了分隔符
image
使用 multipart/form-data 也是类似
image
如实现如下(使用axios实现的)效果我应该怎么处理呢,现在不清楚是bug还是我配置的不对,能否帮忙解答一下
image

中间件获取响应头

使用中间件处理请求,返回的接口如下,在其他issue里面有说通过headers,能过拿到响应头。但是好像没找见。
image

添加对上传文件的监听

umi-request是基于fetch的封装,当上传文件时,如何对上传文件的进度进行监听呢,像xhr.upload.onprogress

response 拦截器中不能获取到 response headers

我用ant-design-pro搭建后台管理系统,使用的是umi-request 是1.0.4,但是发现 每次查询返回的数据是对的 但是response.headers 都是空,而真实返回的头是有的 。 我们的服务器返回的response headers 包括Link , 以及一些自定义的headers 形如X-(...)的header , 但就是在response拦截器中看不到这个数据

response 返回值response 没有文档中的 data 选项, 只有 ReadableStream

背景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,
  })

返回结果如下
{FB83A5BB-9D7D-4A2D-8CF6-078FFEA2D641}_20191126151315

问题 怎么方便的获取后台服务返回的文本?

没有正确导出ResponseError

在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;
  },

headers 请求头设置问题

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 大小写完全一致时才不会出现该错误

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
求解

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.