标签: axios

我axios用于ajax请求和reactJS+ flux用于渲染UI.在我的应用程序中有第三个时间轴(reactJS组件).时间轴可以通过鼠标滚动来管理.应用程序在任何滚动事件后发送实际数据的ajax请求.服务器上的请求处理可能比下一个滚动事件更慢的问题.在这种情况下,应用程序可以有几个(通常2-3个)已经弃用的请求,因为用户进一步滚动.这是一个问题,因为每次接收新数据时间线都会开始重绘.(因为它是reactJS + flux)因此,用户会多次来回看时间轴的移动.解决此问题的最简单方法是,它只是中止以前的ajax请求jQuery.例如:

    $(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

如何取消/中止请求axios？

我正在尝试使用axios来获取带有需要Authorization标头的API的GET请求.

我目前的代码:

const AuthStr = 'Bearer ' + USER_TOKEN;

其中,USER_TOKEN被访问令牌需要.这个字符串连接可能是问题,好像我发布这个AuthStr = 'Bearer 41839y750138-391',以下GET请求工作并返回我之后的数据.

axios.get(URL, { 'headers': { 'Authorization': AuthStr } })
  .then((response => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

我也尝试将其设置为全局标题但没有成功.

这对我来说似乎有点奇怪.我正在尝试使用Jest测试实际(即真实网络)请求.

这些是经过测试的场景:

• 测试没有标题的外部API(fixer.io) <---这是有效的
• 使用标题测试本地API服务器 <---这不起作用
• 使用来自node终端的 标头测试相同的本地API <---这是有效的

这种行为背后的原因是什么？什么是解决方案？

//This WORKS
test('testing no headers', () => {
  return axios.get('http://api.fixer.io/latest')
        .then( res => console.log(res) )
});

//This DOES NOT work
test('testing no headers', () => {
  return axios.get('http://localhost:3000/users/4/profile', 
                      {headers:{authorization:`Bearer ${mytoken}`}})
        .then( res => console.log(res) )
});

//...

//Node Terminal
//This WORKS
> axios.get('http://localhost:3000/users/4/profile', 
                   {headers:{authorization:`Bearer ${mytoken}`}})
        .then( res => console.log(res) )

所以后端(不在我的控制之下)需要一个像这样的查询字符串:

http://example.com/?foo=5&foo=2&foo=11

但是axios使用JS对象发送请求参数:

axios.get('http://example.com/', { foo: 5 });

显然,这样的对象不能有多个具有相同键的字段.

如何使用相同的密钥发送包含多个字段的请求？

我看过axios文档，但它说的只是

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

同样，许多教程仅显示此代码，但是我很困惑它的用途，有人可以给我简单的示例进行操作。

我想使用 axios 重试 5xx 请求。我在 try catch 块中间有我的主要请求。我正在使用 axios-retry 库自动重试 3 次。

我正在使用的 url 会故意抛出 503。但是该请求没有被重试，而是被我的 catch 块捕获。

axiosRetry(axios, {
  retries: 3
});

let result;

const url = "https://httpstat.us/503";
const requestOptions = {
  url,
  method: "get",
  headers: {
  },
  data: {},
};


try {

  result = await axios(requestOptions);

} catch (err) {
  throw new Error("Failed to retry")
}

}
return result;

我在文档步骤中找到了设置超时值的方法。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

但是我在 axios 官方文档中找不到默认值 - https://github.com/axios/axios

默认超时时间是多少？

此外，在 AXIOS 下面使用 http 服务器/客户端（https://nodejs.org/api/http.html#http_class_http_clientrequest）

它是否使用 http 默认超时？我看到我的程序在 2 分钟后超时。

我在React-Redux应用程序上创建了2条路线.我已经添加了主页和回调URL的github应用程序设置.

1.当您点击此路线时:https://reduxapp.herokuapp.com/signin 您点击Github登录按钮,==> githubGeturi

2. Github使用代码https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1重定向, 并触发githubSendCode('9536286a59228e7784a1')操作

您可以在网络呼叫中看到OPTIONS呼叫通过,但POST呼叫永远不会发生.并且您收到控制台错误:

XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=32b70bf671e04762b26c&…_secret=123456789123456789123456789&code=9536286a59228e7784a1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://reduxapp.herokuapp.com' is therefore not allowed access.

以下是我的行动功能:

const CLIENT_ID = '32b70bf671e04762b26c';
const CLIENT_SECRET = '123456789123456789123456789';
const ROOT_URL = window.location.origin;
const REDIRECT_URL = `${ROOT_URL}/auth/callback`;
const AUTHORIZE_URL = 'https://github.com/login/oauth/authorize';
const ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';
const STATE = _.random(10000);

export function githubGeturi() {
  const GITHUB_URL = …

我们在vue.js应用程序中使用axios来访问Azure功能.现在我们收到这个错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

我们试图以这种方式在函数中设置响应头:

context.res = {
        body: response.data,
         headers: {   
          'Access-Control-Allow-Credentials': 'true',
          'Access-Control-Allow-Origin': 'http://localhost:8080',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Request-Headers': 'X-Custom-Header'
         }
      }

有没有人遇到过这个错误？

当发送带有 Base64 编码的 pdf 作为正文的 post 请求时，我收到错误

错误：请求正文大于 maxBodyLength 限制

我试过设置以下两个

“maxContentLength”：无限，“maxBodyLength”：无限

在请求配置中

const result = await axios({
            url: `the url`,
            headers: {'Authorization': `Bearer ${auth_token}`, 'Content-Type': 'application/json'},
            method: 'post',
            data: {
                'ParentId': record_id,
                'Name': file_name,
                'body': body,
                'Description': description ? description : "",
                'maxContentLength': Infinity,
                'maxBodyLength': Infinity
            }
        });

有没有人有解决方法？