标签: axios

这是一个教育项目,不适用于生产.我不打算将用户登录作为其中的一部分.

我可以使用CSRF令牌对Django进行POST调用而无需用户登录吗？我可以不使用jQuery吗？我在这里超出了我的深度,肯定会混淆一些概念.

对于JavaScript方面,我发现了这个redux-csrf包.我不确定如何将它与我POST使用Axios的动作结合起来:

export const addJob = (title, hourly, tax) => {
  console.log("Trying to addJob: ", title, hourly, tax)
  return (dispatch) => {
    dispatch(requestData("addJob"));
    return axios({
      method: 'post',
      url: "/api/jobs",
      data: {
        "title": title,
        "hourly_rate": hourly,
        "tax_rate": tax
      },
      responseType: 'json'
    })
      .then((response) => {
        dispatch(receiveData(response.data, "addJob"));
      })
      .catch((response) => {
        dispatch(receiveError(response.data, "addJob"));
      })
  }
};

在Django方面,我已经阅读了关于CSRF的这个文档,这通常与基于类的视图一起使用.

这是我到目前为止的观点:

class JobsHandler(View):

    def get(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        return …

如何在axios中设置get响应的状态？

axios.get(response){
    this.setState({events: response.data})
}

这是我的数据:

data: function(){
    return {
        contas: [{id: 3,
            nome: "Conta de telefone",
            pago: false,
            valor: 55.99,
            vencimento: "22/08/2016"}] //debug test value
    };
},

这是我的获取请求:

beforeMount() {
    axios.get('http://127.0.0.1/api/bills')
        .then(function (response) {
            console.log("before: " + this.contas);
            this.contas = response.data;
            console.log("after: " + this.contas);
        });
},

问题是我无法this.contas从内部访问axios.get().我试着Vue.set(this, 'contas', response.data);和window.listaPagarComponent.contas = response.data;没有成功.

我的控制台显示:

before: undefined
after: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

但Vue Devtools只显示:

contas: Array[1]
  0: Object
    id: 3
    nome: "Conta de telefone"
    pago: …

我得到的错误是Catch clause variable type annotation must be 'any' or 'unknown' if specified.ts(1196)

用下面的代码

import axios, { AxiosError } from "axios";
try {
        
    } catch(error: AxiosError) {
      throw Error(error);
    }

如何在TS中抛出axios错误？

我需要从远程服务器下载.jpg图像并将其转换为base64格式.我正在使用axios作为我的HTTP客户端.我已经尝试向服务器发出一个git请求并检查response.data它,但它似乎不像那样工作.

链接到axios:https://github.com/mzabriskie/axios

链接到base64实现:https://www.npmjs.com/package/base-64

我正在使用NodeJS/React,所以atob/btoa不起作用,hense the library.

axios.get('http://placehold.it/32').then(response => {
    console.log(response.data); // Blank
    console.log(response.data == null); // False 
    console.log(base64.encode(response.data); // Blank
}).catch(err => console.log(err));

我正在我的网络应用程序中实现令牌身份验证.我的access token每N分钟过期,而不是refresh token用于登录并获得新的access token.

我使用Axios进行所有API调用.我有拦截器设置来拦截401响应.

axios.interceptors.response.use(undefined, function (err) {
  if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
    serviceRefreshLogin(
      getRefreshToken(),
      success => { setTokens(success.access_token, success.refresh_token) },
      error => { console.log('Refresh login error: ', error) }
    )
    err.config.__isRetryRequest = true
    err.config.headers.Authorization = 'Bearer ' + getAccessToken()
    return axios(err.config);
  }
  throw err
})

基本上,当我拦截401响应时,我想进行登录,然后使用新令牌重试原始被拒绝的请求.我的serviceRefreshLogin函数调用setAccessToken()它的then块.但问题是then阻塞发生的时间晚于getAccessToken()拦截器,因此重试发生在旧的过期凭证上.

getAccessToken()并getRefreshToken()简单地返回存储在浏览器中的现有标记(它们管理localStorage,cookies等).

在承诺返回之前,我将如何确保语句不会执行？

(这是github上的相应问题:https://github.com/mzabriskie/axios/issues/266)

我正在尝试使用Node.JS应用程序来发出和接收API请求.它使用Axios向另一台服务器发送get请求,该请求包含从它接收的API调用接收的数据.第二个片段是脚本从调用中返回数据时.它实际上会接受并写入控制台,但它不会在第二个API中将其发回.

function axiosTest () {
axios.get(url)
.then(function (response) {
        console.log(response.data);
// I need this data here ^^
return response.data;
})
.catch(function (error) {
    console.log(error);
});
}

...

axiosTestResult = axiosTest(); 
response.json({message: "Request received!", data: axiosTestResult});

我知道这是错的,我只是想找到一种方法来使它工作.我似乎从中获取数据的唯一方法是通过console.log,这对我的情况没有帮助.

研究了axios和ES6 fetch的文档,我发现两者非常相似,并且经历了$ .ajax及其缩写的强烈影响.

axios的主要优点是浏览器支持.

所以我是对的,如果我使用babel-polyfill - 没有理由使用axios？

我正在使用vuejs 2 + axios.我需要发送一个get请求,将一些params传递给服务器,并获得一个PDF作为响应.服务器使用Laravel.

所以

axios.get(`order-results/${id}/export-pdf`, { params: { ... }})

成功请求,但它不会启动强制下载,即使服务器返回正确的标头.

我认为这是一种典型情况,例如,您需要形成PDF报告并将一些过滤器传递给服务器.那怎么可能实现呢？

更新

所以实际上我找到了解决方案.然而同样的方法不适用于axios,不知道为什么,这就是我使用原始XHR对象的原因.所以解决方案是创建一个blob对象和用户createUrlObject函数.示例示例:

let xhr = new XMLHttpRequest()
xhr.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = 'arraybuffer'

xhr.onload = function(e) {
  if (this.status === 200) {
    let blob = new Blob([this.response], { type:"application/pdf" })
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'Results.pdf'
    link.click()
  }
}

重要提示:您应该将数组缓冲区作为响应类型

但是,在axios中编写的相同代码返回的PDF为空:

axios.post(`order-results/${id}/export-pdf`, {
  data,
  responseType: 'arraybuffer'
}).then((response) => {
  console.log(response)

  let blob …

我已经创建了一个页面，我想通过API调用从数据库中获取所有数据，但是我对VueJS和Javascript也很陌生，我也不知道我在哪里弄错了。我确实使用Postman进行了测试，并且获得了正确的JSON。

这是我得到的：

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

这就是我要的：

(140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …