Reactjs AXIOS Put请求
Reactjs是一种用于构建用户界面的JavaScript库，它通过组件化的方式使开发者能够更轻松地构建可重用的UI组件。AXIOS是一个基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。PUT请求是一种HTTP方法，用于向指定的URL更新资源。
在Reactjs中使用AXIOS发送PUT请求的步骤如下：
- 首先，确保已安装AXIOS库。可以使用以下命令进行安装：
npm install axios- 在需要发送PUT请求的组件中，导入AXIOS库：
import axios from 'axios';- 使用AXIOS发送PUT请求，可以使用以下代码示例：
axios.put('https://api.example.com/resource', { data: 'updated data' })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在上述代码中，我们使用axios.put方法发送PUT请求到指定的URL（https://api.example.com/resource），并传递一个包含更新数据的对象作为第二个参数。然后，使用.then方法处理成功响应，并使用.catch方法处理错误。
AXIOS的优势：
- 简单易用：AXIOS提供了简洁的API，使发送HTTP请求变得简单和直观。
- 支持Promise：AXIOS基于Promise，可以使用
.then和.catch等方法处理异步操作。 - 跨浏览器支持：AXIOS在主流浏览器中都能正常工作，并提供了一致的API。
- 拦截器支持：AXIOS提供了拦截器，可以在请求和响应被发送或接收之前进行拦截和转换。
AXIOS的应用场景：
- 与后端API交互：AXIOS可以用于与后端API进行数据交互，包括获取、创建、更新和删除资源等操作。
- 异步数据获取：AXIOS可以用于从服务器获取异步数据，例如从数据库中获取数据并在React组件中进行展示。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
1回答
如何使用Axios创建此功能？我想在一次请求中保存多个实体，你可以在图片上看到： ? 也许可以动态添加新表单，并为所有表单创建一个提交按钮。 更多代码在这里： ? 保存一个实体很简单： save = async(employee) => {
if (employee.id) {
return axios.put(this.baseURL + "/" + `${employee.id}`, employee).then(res => res.data);
} else {
return axios.post(this.base
浏览 15提问于2020-07-07得票数 0
我正在使用axios从Java后端获取数据，由于cors问题，它失败了(请查找附带的屏幕快照)。我注意到的一件事是，如果我在axios文件中注释掉AuthToken部件，它可以正常工作，并给出状态200，如果我保留AuthToken，它会破坏cors的原因。不太确定这个问题是在java代码中还是在我的axios.js文件中丢失了什么。任何帮助都将不胜感激。提前谢谢。
axios.js
import axios from "axios";
const instance = axios.create({
baseURL: "https://abc.domain
浏览 0提问于2019-08-16得票数 0
我正在使用Axios.post创建一个新的记录。有了这个新记录，在我的下一个PUT操作中，我需要从Firebase为这个记录分配一个唯一的键。
目前，我正在使用嵌套的.then，它似乎正在正常工作。我只是不确定如何在不知道要传递到第二个查询的唯一键的情况下将其转换为Promise.all。它似乎容易受到问题的影响，就像我对它的结构一样。有什么方法可以使用Promise.all来确保两个查询都被执行吗？或者这样也没问题吧？
功能齐全的沙箱就在这里：
以下是问题所在：
postColumn = (columnArr) => {
axios
.post(
浏览 2提问于2020-08-04得票数 0
回答已采纳
1回答
我试图从后端向ReactJS API发送一些简单的数据。然而，ReactJS似乎没有收到它。ReactJS只收到一个空字符串。这是两者的密码。节点在端口3000中运行，并在端口4000上作出反应。
index.js
const express = require("express")
const app = express()
const cors = require("cors")
const a = "Hello world"
// app.use(cors())
app.use(cors({
origin:"ht
浏览 1提问于2020-03-28得票数 0
回答已采纳
2回答
我一直在尝试制作一个简单的post请求api，这样我的reactJS前端就可以发布文章，并将它们填充到DynamoDB中的一个表中。我已经创建了一个dynamoDB表，给出了向这个表发出请求的lambda函数权限，并创建了一个API网关来使用url来发出rest请求。我最初没有将API网关中的集成请求设置为lambda代理，但根据aws支持的建议，我启用了它。
这是我在lambda函数中使用的代码(以api网关(REST )为触发器)：
const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.Docu
浏览 1提问于2020-08-13得票数 2
回答已采纳
我有一个基本的表单提交弹簧引导应用程序。我的问题是当我提交表单时，我得到的结果是无效的。
这是我的表单代码：
Topic Control.java
package io.group.artifact.MainApplication.TopicController;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.lang.reflect.Array;
import java.util.Arr
浏览 2提问于2020-10-22得票数 0
我想提出一个put多部分请求，但是它正在调用POST，即使我尝试将方法设置为"PUT“。
config = {..., method:"PUT"}
axios.request("/getAll", formData, config)
另外，我对Axios的两种方法感到困惑。
Axios.request()和Axios.get()
在调用axios.request()和直接调用axios.get()时，调用方法设置为GET的请求有什么不同？
提前感谢
浏览 3提问于2022-01-27得票数 0
回答已采纳
2回答
我阅读了关于PUT请求的axios文档，它看起来类似于GET请求。然而，没有像GET这样的示例代码，但我假设它类似于如何执行GET请求。我似乎在使用axios发出PUT请求时遇到了问题。到目前为止，我使用的测试服务器是这样的：
axios.put('http://localhost:8080/cats')
.then(res => {
this.setState({
cat: res
});
})
.catch((err) => {
console.log(err);
})
基本上，我正在尝试选择一个项目并对其进行
浏览 1提问于2017-05-22得票数 4
你好，我如何使用reactjs钩子，formik和axios在相同的组件中创建编辑或更新函数，我创建函数add，但我在创建编辑函数时遇到问题我是react的新手我知道创建编辑函数我将使用axios.put，但我不能在表单中呈现数据编辑输入，编辑表单输入总是空的这是我的代码
export default function CreateOrgan(props) {
/* Server State Handling */
const [serverState, setServerState] = useState();
const handleServerResponse
浏览 0提问于2021-03-18得票数 0
当用户关闭或刷新页面时，我试图向后端发出put请求。我已经添加了事件侦听器，当这些事件发生时，我可以运行我的函数。但我的问题是，当这些函数发送put请求时，它们首先发送选项请求，然后发送put请求。这对我来说是个问题，因为当我检查后端日志时，我看到服务器接收到了选项请求(并获得了200个状态代码)，但是put请求不是。
这是我的代码：
<template>
<div id="app">
App
</div>
</template>
<script>
import axios f
浏览 2提问于2020-12-11得票数 1
回答已采纳
2回答
我正在制作简单的待办事项列表应用程序，一切都在工作。我只想确保我做得正确，没有任何错误。我关心复选框更新部分，请检查代码，并告诉我，如果我做错了什么。 下面是复选框的put方法 checkBoxRouteUpdate = () => {
let {todos} = this.state
let newArray = [...todos]
axios
.put(`http://localhost:8080/checkEdit/`, {
checked: newArray.every(todo => todo.check
浏览 26提问于2020-06-14得票数 2
回答已采纳
我正在用ReactJS开发一个web应用程序，我想用axios执行一个GET请求。首先，我尝试使用下面这行代码：
axios.get("http://localhost:8080/MyWebApplication/MyServlet").then(data=>{
//Code
});
但我得到了以下错误：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/WebApplication1
浏览 0提问于2018-05-21得票数 2
回答已采纳
我需要根据日期检索数据。我和邮差一起测试了我的路线，一切都很顺利。但是，当我使用日期进行axios查询时，它返回一个空数组。我知道这将是axios的日期格式问题，但我无法解决。你能帮帮我吗？
下面是我前面的代码：
const getDailyWorking =()=>{
let datas={
activity_creationTimestamp: ('2022-06-28'),
user_id:1
}
console.log(datas)
return axios.get(config.api_url+&
浏览 3提问于2022-07-14得票数 0
回答已采纳
1回答
我的API端点是“/api/user/self/，它接受GET和PUT请求
为了更新用户信息，我需要以JSON中提供的格式使用用户文档发出PUT请求：
{
"name": "Test",
"communications": {
"email": {
"email": "test@user.com",
"notifications": true
},
},
}
我把快车设置如下：
app.put("/api/user/self", (req, res
浏览 4提问于2022-08-13得票数 0
我想要更新状态，但当我想做'put‘时，它不工作，因为axios.put中的axios没有定义。你能帮帮我吗？
getAbsencesByRequestId(reqId) {
axios.get(REQUESTID_URL + reqId).then(response => {
this.collaboId = response.data[0].collabId;
this.beginDate = response.data[0].startDate;
this.finishDate = response.data[0].
浏览 0提问于2018-05-31得票数 3
1回答
我使用axios来获得一个带有数组的json服务器
附加json数组
问题是，我希望通过它的属性将对象列表分配给另一个组件。
import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"
class Axios_cards extends Component {
constructor(props) {
super(props)
this.
浏览 3提问于2020-02-09得票数 1
Axios put不会收到过去的预加载请求，但如果我将其更改为post，请求就会发送。
这是我的代码。在网络选项卡中显示选项，但在post中，它发送选项和POST。
handleSubmit() {
axios.put(process.env.VUE_APP_API_BASE + 'auth/password', {
password: this.password,
password_confirmation: this.password_confirmation,
浏览 3提问于2019-03-23得票数 0
我正在调用两个有效的方法，但是当api1被调用时，它被执行，直到等待axios.put，然后api2被调用而没有从api1得到响应。在从api2获得回复后，它将转到api1 reponse，并得到作为未定义的的应答。
useEffect(() => {
api1();
api2();
}, [])
const api1 = async () => {
try {
var requestModel = JSON.stringify({ UserId: userid, MenuName:
浏览 2提问于2021-07-22得票数 0
我编写了一个asp.net核心3.0和Reactjs web应用程序。当我发布到我的api时，我有一个问题。它击中了方法，但参数始终为空。
我在react应用程序中调试了andI看到的数据。
当我调用DELETE方法时，没有任何问题。
我正在使用CQRS + MediatR模式，但为了简化，我删除了一部分Cqrs + MediatR，并在ActivityConroller中添加了我的代码。注意，我使用Formik库处理表单，还使用Ant Design创建web应用程序的模板。
后端：
[Route("api/[controller]")]
public cl
浏览 3提问于2019-12-03得票数 1
回答已采纳
我试图通过Axios的帮助将React应用程序中的数据发送到我的asp.net核心API，但没有得到数据，
Axios码
axios.put(urlPath,
{
method: 'put',
data: {
PageDbId: "Soursbh",
UserDbId:""
}
})
.then(response =
浏览 3提问于2020-06-23得票数 0
回答已采纳
我刚刚开始研究react&redux设计states+动作。目前我关注的是api调用。我创建了一个apimanager，这是我的请求：
axios.get('http://localhost:3000/0')
.then(response => {
store.dispatch(getDataSuccess(response.data));
return response;
}).catch(function (error) {
console.log('er
浏览 0提问于2016-10-11得票数 0
1回答
axios put不工作
、、、
我的axios代码：
const instance = axios.create({
baseURL: process.env.BASE_API,
timeout: 5000,
withCredentials: true,
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
function get (url, getData) {
return instance.get(url, {
params: getData
})
}
fu
浏览 0提问于2018-05-29得票数 1
1回答
这是我的createAsyncThunk
export const removePlayer = createAsyncThunk(
'player/removePlayer',
async (playerId: any, thunkAPI) => {
try {
await axios.delete(URL, playerId)
} catch (error) {
return thunkAPI.rejectWithValue(error)
}
}
)
浏览 2提问于2022-10-11得票数 0
回答已采纳
我在put方法中遇到一个错误
我使用axios作为post和fetch用于put。我不知道put方法如何在axios上工作，所以如果有人能帮忙，我会很感激的。
Component.vue脚本
editItem (item) {
this.dialog = true
this.editedIndex = this.departments.indexOf(item)
this.id = item.id;
this.department = item.department_name;
},
save() {
c
浏览 4提问于2019-12-15得票数 0
回答已采纳
1回答
我试图通过axios向api发送一个delete和put请求。有了post/get，一切都很好，当我试图用postman发送delete/put时，一切都很好，所以问题在于react应用程序。
axios实例：
const api = Axios.create({
baseURL: "http://localhost:8000",
timeout: 1000,
headers: {'Content-Type': 'application/json'}
});
请求：
Axios.delete("/",{index:na
浏览 1提问于2021-10-20得票数 0
回答已采纳
我有一个向/api/lyric/tag发出axios put请求的函数 const addTag = async (name, tagId, lyricId) => {
const body = {name, tagId, lyricId};
await axios.put(`/api/lyric/tag`, JSON.stringify(body), { headers: {'Content-Type': 'application/json'} });
} 当前路由/api/lyric/tag完全为空： // @route PUT
浏览 22提问于2020-04-27得票数 0
回答已采纳
我有一个前端用户，我想从后端更改。所以我做了一个AXIOS查询，但它不起作用。 async updateUtilisateur(user) {
const headers = {
'authorization': localStorage.getItem(ACCESS_TOKEN)
}
const {id} = user.id;
return await axios.put('/secure/utilisateur/${id}',
user,{headers}
);
}, 在我的后端日
浏览 13提问于2018-12-20得票数 1
2回答
在我的传奇故事中，我将用户凭据发送到后端 const request = client.post('api/JwtAuth/GenerateToken', {UserName: action.username, Password: action.password})
console.log(request) 客户端如下所示 从" axios“导入axios const client = axios.create({
baseURL: 'https://localhost:5001/',
timeout: 600000000000,
浏览 89提问于2021-11-17得票数 0
回答已采纳
我正在尝试使用axios向服务器发出https请求。大多数关于axios的教程都详细说明了如何发出http请求。每当用户登录时，我都会发出请求。这是我目前的请求：
axios.post('/api/login/authentication', {
email: email,
password: password
})
.then(response => {
this.props.history.push('/MainPage')
})
.catch(error => {
console.log(error)
})
有没有人能帮我把这个
浏览 2提问于2018-12-02得票数 9
回答已采纳
1回答
我知道如何使用reactJS存储，但是当我使用带有对象数组的存储时，我遇到了一个问题。
constructor(props) {
super(props);
this.state = {
array: [{ id: null, summary: "", name: "" }]
};
}
componentWillMount() {
const query = "http://api.tvmaze.com/search/shows?q=game";
var dataCou
浏览 1提问于2019-01-23得票数 1
在我的reactjs页面中，我将使用axios从api获取it和img的列表，并将其存储在state中。
示例：
[
{id: 21321321,img_url: },
{id: 97777798},img_url: }
....
]
使用axios获取数据后，我将显示图像列表。
同时，我想使用axios获得更多基于id的数据。我将在一个列表中一次有4个in。因此，我必须再次发出4个请求，并获取相应的数据并将其显示在图像下方。
如果我以如下所示的状态存储数据
[
{id: 21321321,img_url: ,further_data: ... },
{id: 97777798,img_url
浏览 1提问于2018-11-05得票数 1
为什么我使用axios.delete(url)或axios.put()来发送请求，但是当我在Chrome Dev工具中检查来自NetWork的请求时，请求方法是OPTIONS，Access-Control- request -Method是这样：
浏览 2提问于2018-04-30得票数 8
在使用表单并插入新数据后，将显示此错误。
这是我的密码：
import React from "react";
import { Form, Input, Button } from "antd";
import { connect } from "react-redux";
import axios from "axios";
import hashHistory from './hashHistory';
const FormItem = Form.Item;
class CustomF
浏览 0提问于2020-03-26得票数 0
回答已采纳
我请求使用2个参数调用post axios。 export const getUser = (page,Type) => {
axios.post(APIURL.apiURL,
{
page: page,
auth: Type
}, {
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
浏览 6提问于2019-09-18得票数 0
我正在尝试使用axios对PHP文件进行POST调用。 loginHandler = () => {
var params = new URLSearchParams();
params.append('User', this.state.inputUsername);
params.append('Pwd', this.state.inputPassword);
var callAction = process.env.REACT_APP_API_ENDPOINT + 'LoginHandler.php&
浏览 10提问于2020-04-08得票数 1
回答已采纳
我有一个关于形式的传奇：
export function* apiRequest(apiBaseUrl, action) {
const axiosInst = getAxiosInst(apiBaseUrl);
try {
if (!action.serviceName) {
throw new Error("No service name provided");
}
const response = yield call( axiosInst.get, `/${action.serviceName}/foo-api` );
浏览 0提问于2018-08-19得票数 4
1回答
它有点工作，但问题是它复制了正在更新的文件，并将其放在页面的末尾，所有我试图在项目上显示更新 下面是我想要做的 submitEdit = (id, value) => {
let {todos} = this.state
todos.map((item => {
if (item._id === id) {
axios
.put(`http://localhost:8080/edit/${id}`, {
todo: value,
浏览 12提问于2020-06-12得票数 2
回答已采纳
1回答
找不到变量:令牌
、、
我试着用axios从端点API中获取数据，但是有一个错误:找不到令牌，你能帮我吗？？这是我的代码，第一个文件是请求，第二个文件是我试图获取数据的代码。
请求文件：
import axios from "axios"
let axiosApiInstance = axios.create();
function setToken(token,RefreshToken) {
axios.defaults.headers.common['x-access-token'] = token;
axiosApiInstance.interce
浏览 2提问于2020-12-02得票数 0
我现在正在学习编程，所以请原谅我的任何错误，我会感激任何提示。我有一个托管在以下域中的API ("api-myapp.com")，我正在本地主机上尝试使用axios发布一个表单(只有登录用户才能发送)，然后在本地主机上创建一个表单(只有登录用户才能发送该表单)，但是请求需要很长时间才能完成，当它完成时，它返回以下错误(在请求的资源上不存在‘Access-Control-Allow原产地’报头)。(net::ERR_FAILED 504)，我尝试了一些我在互联网上找到的解决方案，但似乎没有奏效，这是我的代码：
FrontEnd：
try {
const resp
浏览 8提问于2022-06-27得票数 0
回答已采纳
2回答
Vue Axios未返回响应
、、、、
我对vue axios有意见。 我试图使用get / put发送数据，但我无法在服务器端读取它。使用POST一切正常，所以我不知道问题出在哪里。顺便说一句。一切在PostMan中都能正常工作。 axios({
method: 'PUT',
url: `http://example.org`,
data: Qs.stringify(data),
}).then(response => (console.log(response.data)))
浏览 21提问于2019-06-23得票数 0
1回答
我已经使登录页面成为UI，并通过Axios库集成了API，当我点击API时，它会显示错误
xhr.js:166 OPTIONS https://testapi.halanx.com/rest-auth/login/ net::ERR_CONNECTION_REFUSED
应用程序UI的URL：
代码网址：
这是登录码
handleSubmit=(e)=>{
e.preventDefault()
//console.log("Ihi")
const Login={
username:this.state.email || '
浏览 10提问于2019-07-18得票数 0
我正试着把我的头绕到这个密码上。它实际上将两个params (页面编号+查询)发送到服务器，然后获取结果并将它们保存在状态中。
但是，我不理解useEffect中的cancel，useEffect部分。如果有人能彻底解释的话，我会很感激的。
import axios from "axios";
import { useEffect, useState } from "react";
export default function useUserSearch(query, pageNumber) {
const [loading, setLoading] =
浏览 1提问于2022-09-02得票数 0
我一直在前端使用fetch发出PUT请求。我的代码如下所示：
fetch(url, {
headers: {
'content-type': 'png',
},
method: 'PUT',
body: file,
})
我正试着用axios写同样的代码，但似乎行不通
await axios.put(url, {
data: {
body: file
},
headers: {
'content-type': 'png',
浏览 0提问于2019-09-10得票数 1
我有两个ip地址，假设它们是32.64.25.22:3000和32.64.25.22:4000。我希望axios根据ip将diff url值作为基础。 因此，我创建了一个名为baseUrl.js的单独文件，其中包含以下代码 export default {
hostname = window.location.hostname; // gives ip adress
URL1 = "32.64.25.22:3000",
URL2 = "32.64.25.22:4000",
if(hostname === URL1){
浏览 9提问于2020-07-09得票数 0
回答已采纳
我想知道如何在reactJS的axios方法中设置访问-控制-允许-原产地，还是反应-本机环境？我使用CORS加载项，它可以工作，但是我也想在标题中设置它，我尝试了这些方法，但是没有一个不起作用。
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
和
let axiosConfig = {
headers: {
'method':'POST',
'X-Requested-With': 'XMLHttpReq
浏览 3提问于2018-07-29得票数 5
回答已采纳
我有一个在前端和后端之间充当中间件的应用程序。它基于cookie注入授权。
一些PUT和POST请求由于套接字挂起错误而失败。
axios.create({
timeout: 10000,
httpsAgent: new https.Agent({ keepAlive: true })
})
奇怪的是，并非所有的请求都失败了。
有一个服务器，PUT和POST请求在Axios中总是失败，但节点获取和postman没有失败。
我试图确定是某个特定的头还是负载本身导致了问题，但我什么也没有发现。
我试着使用axios 0.27.2，1.1.3。节点12，14
浏览 6提问于2022-10-19得票数 0
我的allowedOrigins是否正确指定？
spring:
cloud:
gateway:
default-filters:
args:
retries: 3
globalcors:
corsConfigurations:
'[/**]':
allowedOrigins: "*"
allowedMethods:
- GET
- POST
浏览 9提问于2022-02-19得票数 -1
回答已采纳
2回答
我有一个像这样的JSON数据：My JSON data 这是我的代码： class WorldLineChart extends Component{
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount(){
axios.get(`https://td.fpt.ai/corona/corona-total.json`)
.then(res =
浏览 15提问于2020-04-29得票数 0
回答已采纳
在何处写入axios请求以将todo插入到database.If中，我将在componentDidUpdate()中写入axios请求，每当单击todo_completed状态复选框时，它将插入数据库中。重复记录维护正确和错误。我不知道在todoApp.jsx中在哪里调用post请求这里是我的代码todoapp.jsx
var React = require('react');
var TodoSearch = require('TodoSearch');
var AddTodo = require('AddTodo');
浏览 0提问于2017-05-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
