在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请求

postdata=()=>{
   const postObject={
      //值
   }
   Axios.post(‘url’, postObject).then(response=>{ //process the response});
}

与get类似，我们也可以在完成post request时获得承诺。还有其他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’;