数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学在 React.js 中发起 HTTP 请求
在一个典型的 Web 应用中，客户端通过浏览器发出 HTTP 请求，服务器在响应中发送包含数据的 HTML 页面。
但在单页应用程序 (SPA) 中，我们只有一个页面，每当客户端向服务器发出 HTTP 请求时，服务器通常会以 JSON/XML 格式的数据进行响应。
为了发出 HTTP 请求，我们有一些如下选项：
- XmlHttpRequest
- Axios
- Windows fetch
Axios 易于与 React 集成并处理请求。
让我们先安装它
npm install –save axios
在使用前将其导入 jsx 文件
import Axios from ‘axios’;
从组件生命周期文章中，我们观察到 componentDidMount 是进行副作用（例如发出 HTTP 请求）的最佳位置。因为 componentDidMount 在组件的生命周期中只执行一次。一旦 HTTP 请求完成，我们就可以异步更新我们的状态，页面将使用这些更新重新渲染。
Axios 使用 Promise 以异步方式工作。
componentDidMount(){
Axios.get(‘url’).then((response)=>{console.log(response)});
}然后函数简单地包含一个函数，该函数的参数是来自 Promise 的响应。在 then 中，我们可以使用 setState 将数据更新到类的状态对象。
我们可以在 componentDidMount 中更新实际状态之前操作数据。此外，我们可以在 Axios 中发送查询参数。
根据状态的一些变化，如果我们想发出另一个 HTTP 请求，那么我们应该使用 componentDidUpdate。但是我们必须确保通过添加条件逻辑不会导致无限循环。例如，使用 ID 作为参数，我们可以检查它是否与之前的 ID 不相等，然后我们可以在此处发出新的 HTTP 请求。
发出 POST 请求
与 GET 请求类似，我们可以在按钮点击时发出 POST 请求。
postdata=()=>{
const postObject={
//values
}
Axios.post(‘url’, postObject).then(response=>{ //process the response});
}与 GET 类似，我们在 POST 请求完成后获得 Promise。还有其他 HTTP 方法可以以相同的方式执行。
deleteData=()=>{
Axios.delete(‘url’).then(response=>{});
}使用 Axios 处理错误
我们在 then 方法之后有 catch 方法。
Axios.get(‘url’).then(response=>{}).catch(error=>{
//we can update state to an error to show meaningful message on screen
});全局添加 Axios 拦截器
有时我们需要一个公共流程，例如在发出 HTTP 请求处理时添加身份验证数据或日志记录。
在 index.js 文件中，我们可以添加拦截器，这些拦截器将可用于所有 Axios 配置。
Index.js
Import axios from ‘axios’;
Axios.interceptors.request.use(request=>{
//add logic here on the coming request
return request;
});确保在拦截器中也返回请求。我们也可以添加错误逻辑，如下所示
Axios.interceptors.request.use(request=>{
//add logic here on the coming request
return request;
}, error=>{
//add error specific logic
return Promise.reject(error);
});同样，我们可以为响应添加拦截器
Axios.interceptors. response.use(response=>{
//add logic here on the coming response
return response;
}, error=>{
//add error specific logic
return Promise.reject(error);
});我们可以为 Axios 进行其他全局配置，例如为所有请求设置基本 URL。
在 index.js 文件中添加以下行
Axios.defaults.baseURL=’your base url’;
3K+ 次浏览
