在React.js中发出HTTP请求
在典型的Web应用程序中，客户端通过浏览器发出http请求，而服务器在响应中发送带有数据的html页面。
但是在单页应用程序(SPA)中，我们只有一页，每当客户端向服务器发出http请求时，它通常都会以json/xml格式的数据进行响应。
为了发出http请求，我们有以下一些选项-
XmlHttpRequest
Axios
Windows获取
Axios易于处理响应和处理请求。
首先安装
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的响应。然后，我们可以使用setState将数据更新为类的状态对象。
我们可以在componentDidMount中更新实际状态之前操纵数据。另外，我们可以在axios中发送查询参数。
根据状态的某些变化，如果我们要发出另一个http请求，则应使用componentDidUpdate。但是我们必须通过添加条件逻辑来确保它不会导致无限循环。使用id作为参数的示例，我们可以检查它是否不等于先前的id，然后可以在此处发出新的http请求。
发出post请求
类似于get请求，我们可以在按钮点击时post请求。
postdata=()=>{
const postObject={
//值
}
Axios.post(‘url’, postObject).then(response=>{ //process the response});
}与get类似，我们也可以在完成postrequest时获得承诺。还有其他http方法可以用相同的方式执行。
deleteData=()=>{
Axios.delete(‘url’).then(response=>{});
}使用axios处理错误
在then方法之后有catch方法。
Axios.get(‘url’).then(response=>{}).catch(error=>{
//我们可以将状态更新为错误以在屏幕上显示有意义的消息
});全局在axios中添加拦截器
有时我们需要一个通用的过程，例如在进行http请求处理时添加身份验证数据或记录日志。
在index.js文件中，我们可以添加对所有axios配置可用的拦截器。
Index.js
Import axios from ‘axios’;
Axios.interceptors.request.use(request=>{
//在即将到来的请求上添加逻辑
return request;
});确保在拦截器中也返回请求。我们可以添加错误逻辑，如下所示
Axios.interceptors.request.use(request=>{
//在即将到来的请求上添加逻辑
return request;
}, error=>{
//添加特定于错误的逻辑
return Promise.reject(error);
});同样，我们可以添加拦截器来响应
Axios.interceptors. response.use(response=>{
//在即将到来的响应上添加逻辑
return response;
}, error=>{
//添加特定于错误的逻辑
return Promise.reject(error);
});我们可以为axios进行其他全局配置，例如为所有请求设置bse网址。
在index.js文件中，添加以下行
Axios.defaults.baseURL=’your base url’;