标签: axios

我有两个文件 - 其中之一是公共文件，其中包含使用 axios 进行请求的逻辑PUT。progress bar另一个文件包含根据progressEventfrom方法的值进行更新的组件onUploadProgress。我想setUploadPercentage用发出的当前值设置状态。但我很难重构我的代码以访问我的类组件中的这个值FileUpload。任何帮助，将不胜感激。

1. 包含 axios 请求逻辑的文件：-

export function putData(formData) {
  return axios.put('/update', formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
    onUploadProgress : (progressEvent) => {
        return parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total))
    },
  });
}

2. 包含组件的文件：-

import React, { useState } from "react";
import { putData } from "../../services/clientService";
import Progress from "../common/progress";

const FileUpload = () => {
  const [uploadPercentage, setUploadPercentage] = useState(0);

  const onChange = …

我不断收到一条错误，指出 response.json 不是我的 axios 请求数据的函数。我不知道为什么这个代码在两天前起作用...我尝试乱搞承诺，看看这是否会有所作为，但似乎不会。代码在下面，非常感谢任何帮助

import React, { Component } from 'react'
import TrackingRender from '../TrackingRender/TrackingRender'
import axios from 'axios'
import { Redirect } from 'react-router';


export class OrderTracking extends Component {
    constructor() {
        super()
        this.state = {
            loadingData: true,
            order: []
        }
    }
    async componentDidMount() {
        this._isMounted = true;
        if (this.state.loadingData) {
            try {
                const { id } = this.props.match.params
                const response = await axios.get(`http://localhost:5000/api/orders/${id}`)
                const data = await response.json()
                this.setState({
                    order: data,
                    loadingData: false
                })
                console.log(this.state)
            } catch …

我正在尝试使用 axios (react) 发布数据，例如；

return axios.post(API_URL + 'available-times/edit', {data}, {headers: authHeader()})\n

一切都很好，它可以工作，但它发布的数据如下：

data: {id: 1, monday_from: "11:30", monday_till: "15:00", tuesday_from: "11:00", tuesday_till: "16:00",\xe2\x80\xa6}\n

我不想在我的对象中拥有“数据”键，如何防止它没有数据键？

我正在将现有的 Express 应用程序转换为 NestJS，目前我有一个配置文件，在其中为每个微服务创建多个 axios 实例：

export const writeModelApi = axios.create({
  baseURL: getWriteModelApiUrl(),
});

export const readModelApi = axios.create({
  baseURL: getReadModelApiUrl(),
});

export const configApi = axios.create({
  baseURL: getConfigApiUrl(),
});

function addCamelizeInterceptors(api: any) {
  api.interceptors.request.use(
    (config: AxiosRequestConfig): AxiosRequestConfig => {
      config.data = decamelizeKeys(config.data);

      return config;
    },
    (error: any) => {
      return Promise.reject(error);
    }
  );
  
  api.interceptors.response.use(
    (response: AxiosResponse): AxiosResponse => {
      response.data = camelizeKeys(response.data);

      return response;
    },
    (error: any) => {
      if (error.response != null) { 
        error.response.data = camelizeKeys(error.response.data);
      }

      return …

我正在使用 axios 拦截器将所有 api 错误记录到一个公共位置的后端服务器。问题是，如果一个 api 调用失败，则 logError 函数会被多次调用，并且会发送多个重复的请求进行日志记录。

这是我的代码

axios.interceptors.response.use(response => {
    return response;
},
error => {
    logError(error.message);
    return Promise.reject(error);
})

我认为该请求没有问题，因为我使用了相同的请求来发布新角色并且成功了。我认为问题出在回应上。

后端使用 Express 和 Node

我有一个更新角色的API 路线。

router.put('/:id', (req, res, next) => {
    const { id } = req.params;
    Promise.all([
        updateAbilities(id, req.body.abilities, next),
        updateCharacter(id, req.body.name, req.body.img, next),
        updateShows(id, req.body.shows, next)
    ])
        .then(values => console.log(values, 'are the values received at put request'))
        .then(() => res.redirect('/' + id))
        .catch(err => next(err));
})

当我使用Postman发送请求时，我得到了完美的响应。

邮递员回复的图像

使用 Axios 在 React 应用程序中进行前端

我正在使用Axios在 React 应用程序上执行相同的请求。

export async function updateOne(inputs, cid) {
    inputs = {
        name: "green …

我一直在构建我的 React 应用程序（使用 create-react-app），突然遇到以下错误： TypeError: http.ServerResponse is undefined

我正在添加删除评论功能，该功能使用 axios 发送删除请求（如果这有影响的话）。

我是 React 新手，现在不知道该怎么办。我该如何调试这个？

非常感谢帮助！

如果有帮助的话，我正在使用 axios，节点后端并做出反应。

如何使用 React Typescript 在 axios 中设置我的 baseURL？

我尝试做axios.defaults.baseURL = 'myurl.com';

但是，它不起作用。在网络选项卡中，它表示承诺正在等待处理。

知道我怎样才能实现它吗？

import { useQuery } from 'react-query'
import axios from 'axios'

axios.defaults.baseURL = 'myurl.com';


const useCampaign = (token: string, campaignID: string) =>
  useQuery(
    'campaign',
    () =>
      axios
        .get(`/api/campaigns?lgp-webview-token=${token}`, {
          headers: { 'X-Campaign-ID': campaignID }
        })
        .then((res) => res.data),
    {
      retry: false,
      refetchOnWindowFocus: false
    }
  )

export default useCampaign

我没有使用 Express 服务器，我只是在 Node 中运行我的应用程序。

在此过程中，我向 URL 发送请求，以便检索发出后续请求所需的 cookie 和标头。

但是，第二个请求失败，因为它没有发送前一个响应中的标头/cookie。

这是我的整个代码：

const client = axios.create({
  withCredentials: true,
  proxy: {
    host: "192.168.0.137",
    port: 9393,
  }, //Fiddler proxy
});
client
  .post("https://auth.riotgames.com/api/v1/authorization", {
    acr_values: "urn:riot:bronze",
    claims: "",
    client_id: "riot-client",
    nonce: 1,
    redirect_uri: "http://localhost/redirect",
    response_type: "token id_token",
    scope: "openid link ban lol_region",
  })
  .then(() => {
    client
      .put("https://auth.riotgames.com/api/v1/authorization", {
        type: "auth",
        username: "testuser1",
        password: "testpassword1",
        remember: false,
        language: "en_GB",
        region: "EUW1",
      })
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.log(err.response);
      });
  }); …

ProgressBar我正在尝试在 vue 中构建一个小组件

我的父组件是这样的：

onUploadProgress: function(progressEvent) {
   this.progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
   console.log(this.progress)
   }

<ProgressBar :loading="loading" :progress="progress"></ProgressBar>

这是我的子组件：

<template>
   <div v-if="loading" class="progress-bar-wrapper">
     <div class="progress-bar" :style="'width:'+progress+'%'">{{progress+'%'}}</div>
   </div>
</template>

<script>
export default {
  name: "ProgressBar",
  props: {
    loading: {type:Boolean},
    progress:{type:Number, default:0}
  },
  watch: {
   progress(){
     console.log(this.$props.progress)
   }
  }
 }
</script>

我缩小了问题范围，看起来this.progress我的父母没有正确更新；如果我在上面放一个观察者，什么也不会发生：

watch: {
      progress(){
        console.log(this.progress)
      }
    }

但是如果我console.log(this.progress)从回调函数中得到预期值......