使用 axios 从 404 响应中捕获错误消息或在 javascript 中获取
Posted
技术标签:
【中文标题】使用 axios 从 404 响应中捕获错误消息或在 javascript 中获取【英文标题】:catch error message from 404 response with axios or fetch in javascript 【发布时间】:2019-07-26 04:49:40 【问题描述】:我正在尝试使用 axios 支持来自 api (https://rickandmortyapi.com) 的 404 响应。
因此,当项目存在时,响应如下所示:
"data":
"id": 11,
"name": "Albert Einstein",
// ...
,
"status": 200,
"statusText": "OK",
"headers":
"content-type": "application/json; charset=utf-8"
,
"config":
"transformRequest": ,
"transformResponse": ,
// ...
,
"request":
如果没有找到响应是 404 并且数据是这样的:
"error": "Character not found"
所以我想阅读此错误消息并将其放入变量但没有效果。我有类似的东西用于测试:
new Vue(
el: "#app",
data:
existingCharacter: ,
nonExistingCharacter:
,
methods:
apiRequest (id, character)
console.log('starting Request');
axios('https://rickandmortyapi.com/api/character/'+id,
validateStatus: function (status)
return status < 500; // Reject only if the status code is greater than or equal to 500
)
.then((res) =>
console.log('got response');
console.log(res);
this[character] = res;
).catch(function (error)
if (error.response)
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
else if (error.request)
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
else
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
console.log(error.config);
)
.then(function ()
console.log('request finished');
);
)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="columns is-mobile">
<div class="column is-half">
<h2 class="title">existing item: </h2>
<button class="button is-fullwidth"
@click="apiRequest(11, 'existingCharacter')">
get
</button>
<pre>existingCharacter</pre>
</div>
<div class="column is-half">
<h2 class="title">non existing item:</h2>
<button class="button is-fullwidth"
@click="apiRequest(1123, 'nonExistingCharacter')">
get</button>
<pre>nonExistingCharacter</pre>
</div>
</div>
</div>
所以我们看到当服务器响应 404 时没有响应。从 404 响应中读取此消息的任何提示?
我也用 fetch 试过这个,但我认为问题是一样的。当服务器返回 404 时,我得到的只是错误,仅此而已。用 404 返回这些消息是一个好习惯吗?我还看到在 404 控制台中有一条 CORS 消息(也许这是一个键)
感谢您的帮助。 :)
【问题讨论】:
【参考方案1】:这是 The Rick and Morty API 的限制。当请求返回 404 时,它不会发送 CORS 标头。当出现 CORS 问题时,您无法读取响应。
您可以在 DevTools 中自行检查
如果需要,您可以在他们的GitHub repo 提出问题。
【讨论】:
以上是关于使用 axios 从 404 响应中捕获错误消息或在 javascript 中获取的主要内容,如果未能解决你的问题,请参考以下文章
捕获axios中返回的Status Code404这类的状态码-案例
捕获axios中返回的Status Code404这类的状态码-案例
Json-server 使用 React js 和 Redux 响应错误 404 not found Post Method