Axios -删除请求与请求体和头?

我在ReactJS中编程时使用Axios，我假装向服务器发送DELETE请求。

要做到这一点，我需要头文件:

headers: {
'Authorization': ...
}

而身体是由

var payload = {
"username": ..
}

我一直在网上搜索，只发现DELETE方法需要一个“参数”，不接受“数据”。

我一直想这样发送

axios.delete(URL, payload, header);

甚至

axios.delete(URL, {params: payload}, header);

但似乎什么都不管用……

有人能告诉我它是否可能(我假设它是)发送一个删除请求与头部和主体，以及如何这样做?

提前谢谢你!

411309 次浏览
小开

axios.delete同时支持请求正文和请求头。

它接受两个参数:url和可选的配置。你可以使用config.data来设置请求正文和请求头，如下所示:

axios.delete(url, { data: { foo: "bar" }, headers: { "Authorization": "***" } });

看这里- https://github.com/axios/axios/issues/897

小开

axios。删除是传递了一个url和一个可选配置。

axios.delete (url(配置)

字段可用的配置可以包括头。

这使得API调用可以写成:

const headers = {
'Authorization': 'Bearer paperboy'
}
const data = {
foo: 'bar'
}


axios.delete('https://foo.svc/resource', {headers, data})
小开

要通过axios发送带有一些头的HTTP DELETE，我已经这样做了:

  const deleteUrl = "http//foo.bar.baz";
const httpReqHeaders = {
'Authorization': token,
'Content-Type': 'application/json'
};
// check the structure here: https://github.com/axios/axios#request-config
const axiosConfigObject = {headers: httpReqHeaders};


axios.delete(deleteUrl, axiosConfigObject);

不同的HTTP动词(GET, POST, PUT, DELETE)的axios语法很棘手，因为有时第二个参数应该是HTTP正文，其他一些时候(当它可能不需要时)你只是将头作为第二个参数传递。

然而，假设你需要发送一个没有HTTP正文的HTTP POST请求，那么你需要传递undefined作为第二个参数。

请记住，根据配置对象(https://github.com/axios/axios#request-config)的定义，在调用axios.delete时，您仍然可以通过data字段在HTTP调用中传递HTTP正文，但是对于HTTP DELETE谓词，它将被忽略。

第二个参数有时是HTTP主体，有时是axios的整个config对象，这种混淆是由于HTTP规则是如何实现的。有时HTTP调用被认为是有效的，并不需要HTTP主体。

小开

下面是使用axios发送各种http动词所需的格式的简要总结:

  • GET:两个方法

    • < p >的第一个方法

      axios.get('/user?ID=12345')
.then(function (response) {
// Do something
})
    • < p >第二种方法

      axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
// Do something
})

    以上两个是等价的。观察第二个方法中的params关键字。

  • POST和PATCH

    axios.post('any-url', payload).then(
// payload is the body of the request
// Do something
)


axios.patch('any-url', payload).then(
// payload is the body of the request
// Do something
)
  • < p > DELETE

    axios.delete('url', { data: payload }).then(
// Observe the data keyword this time. Very important
// payload is the request body
// Do something
)

关键要点

  • get请求可选地需要params键来正确设置查询参数
  • 带有body的delete请求需要将其设置在data键下
小开
我也遇到了同样的问题… 我通过创建一个自定义axios实例解决了这个问题。并使用它来进行身份验证的删除请求..

const token = localStorage.getItem('token');
const request = axios.create({
headers: {
Authorization: token
}
});


await request.delete('<your route>, { data: { <your data> }});
小开

我遇到了同样的问题，我是这样解决的:

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})
小开

对于删除，您将需要按照以下步骤进行操作

axios.delete("/<your endpoint>", { data:<"payload object">})

这对我很管用。

小开
最佳答案

所以在尝试了几次之后，我发现它起作用了。

请按照顺序点菜这是非常重要的，否则它不会工作

axios.delete(URL, {
headers: {
Authorization: authorizationToken
},
data: {
source: source
}
});
小开
实际上，axios.delete支持请求体。< br > 它接受两个参数:URL和可选的config。这是…< / p > 
axios.delete(url: string, config?: AxiosRequestConfig | undefined)

您可以通过以下方法设置删除请求的响应体:

let config = {
headers: {
Authorization: authToken
},
data: { //! Take note of the `data` keyword. This is the request body.
key: value,
... //! more `key: value` pairs as desired.
}
}


axios.delete(url, config)

我希望这能帮助到一些人!

小开

我找到了一个有效的方法:

axios
.delete(URL, {
params: { id: 'IDDataBase'},
headers: {
token: 'TOKEN',
},
})
.then(function (response) {
        

})
.catch(function (error) {
console.log(error);
});

我希望这对你也有用。

小开

我尝试了以上所有的方法，但对我都不起作用。我最终只是使用PUT(灵感找到在这里)，只是改变了我的服务器端逻辑，对这个url调用执行删除。(django rest框架函数重写)。

如。

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
.then((response) => response.data)
.catch((error) => { throw error.response.data; });
小开

对于那些尝试了以上所有方法但仍然没有看到请求的有效负载的人-请确保您有:

"axios": "^0.21.1" (not 0.20.0)

那么，上面的解决方案就起作用了

axios.delete("URL", {
headers: {
Authorization: `Bearer ${token}`,
},
data: {
var1: "var1",
var2: "var2"
},
})

你可以访问有效载荷

req.body.var1, req.body.var2

问题在于:

https://github.com/axios/axios/issues/3335

小开

如果我们有:

myData = { field1: val1, field2: val2 }

我们可以将数据(JSON)转换为字符串，然后将其作为参数发送到后端:

axios.delete("http://localhost:[YOUR PORT]/api/delete/" + JSON.stringify(myData),
{ headers: { 'authorization': localStorage.getItem('token') } }
)

在服务器端，我们得到我们的对象:

app.delete("/api/delete/:dataFromFrontEnd", requireAuth, (req, res) => {
// we could get our object back:
const myData = JSON.parse(req.params.dataFromFrontEnd)
})

注意:来自"x4wiz"在2月14日15:49上比我更准确地回答这个问题!我的解决方案是没有“身体”;(在某些情况下可能会有帮助……)

更新:我的解决方案是不工作时，对象的重量为540字节(15*UUIDv4)和更多(请检查文档的确切值)。“x4wiz"(以及上面的许多其他)是更好的方式。那么，为什么不删除我的答案呢?因为，它是有效的，但最重要的是，它给我带来了我的Stackoverflow的大部分声誉;-)

小开
与axios无关，但可能帮助人们解决他们正在寻找的问题。PHP在执行delete调用时不解析post数据。Axios delete可以发送带有请求的主体内容。 例子:< / p > 
//post example
let url = 'http://local.test/test/test.php';
let formData = new FormData();
formData.append('asdf', 'asdf');
formData.append('test', 'test');


axios({
url: url,
method: 'post',
data: formData,
}).then(function (response) {
console.log(response);
})


result: $_POST Array
(
[asdf] => asdf
[test] => test
)




// delete example
axios({
url: url,
method: 'delete',
data: formData,
}).then(function (response) {
console.log(response);
})


result: $_POST Array
(
)

要在PHP中获得删除调用的post数据，请使用:

file_get_contents('php://input');
小开 
axios.post('/myentity/839', {
_method: 'DELETE'
})
.then( response => {
//handle success
})
.catch( error => {
//handle failure
});
< p >感谢: https://www.mikehealy.com.au/deleting-with-axios-and-laravel/ < / p >
小开

对于Axios DELETE Request，您需要在一个JSON对象下包含请求有效负载和头部:

axios.delete(URL, {
headers: {
'Authorization': ...
},
data: {
"username": ...
}
})

为什么我不能这样做，因为我做类似的POST请求?

查看Axios文档，我们看到.get， .post…有不同的签名:

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意只有post， patch和put有data参数。这是因为这些方法通常包含一个主体。

查看RFC7231，我们看到DELETE请求不需要有body;如果您包含一个主体，那么它的含义在规范中没有定义，服务器也不需要理解它。

DELETE请求消息中的有效负载没有定义的语义;在DELETE请求上发送有效负载主体可能会导致某些现有实现拒绝该请求。

(从第5段在这里)。

在这种情况下，如果您还控制着服务器，那么您可以决定在请求中接受这个主体，并给它任何您想要的语义。也许你正在与别人的服务器合作，他们期望这个身体。

因为规范中没有定义带主体的DELETE请求，而且它们并不常见，所以Axios没有将它们包含在这些方法别名中。但是，因为它们是可能的，你可以做到，只是需要多一点努力。

我认为这将是更传统的包括url上的信息，所以你会这样做:

axios.delete(
`https://example.com/user/${encodeURIComponent(username}`,
{ headers: ... }
)

或者，如果您希望能够使用不同的标准删除用户(有时通过用户名，或通过电子邮件，或通过id…)

axios.delete(
`https://example.com/user?username=${encodeURIComponent(username)}`,
{ headers: ... }
)
小开

使用{data: {key: value}} JSON对象，示例代码片段如下所示:

// Frontend Code


axios.delete(`URL`, {
data: {id: "abcd", info: "abcd"},
})
.then(res => {
console.log(res);
});


// Backend Code (express.js)


app.delete("URL", (req, res) => {
const id = req.body.id;
const info = req.body.info;
db.query("DELETE FROM abc_table WHERE id=? AND info=?;", [id, info],
(err, result) => {
if (err) console.log(err);
else res.send(result);
}
);
});
小开

Axios DELETE请求支持与POST请求类似的功能，但是有不同的格式。

DELETE请求有效负载示例代码:

axios.delete(url, { data: { hello: "world" }, headers: { "Authorization": "Bearer_token_here" } });

POST请求有效负载示例代码:

axios.post(url, { hello: "world" }, { headers: { "Authorization": "Bearer_token_here" } });

注意，{hello: "world"｝以不同的方式配置，但两者执行相同的功能。


提交答案