在 React 应用里,请求后端服务接口需要使用一个 HTTP 客户端,我们可以使用浏览器自带的 fetch ,也可以额外再安装一个 HTTP 客户端,比如 axios。下面给项目安装一个 axios,在终端,项目所在目录的下面,执行 npm install axios。
完成以后就可以在项目里使用 axios 发送 HTTP 请求了,可以直接导入使用 axios,也可以创建一个 axios 实例,这样在创建它的时候可以配置一下。
新建一个文件,放在 src/app 的下面,先在文件里导入 axios,它来自 axios 这个包。然后可以创建并且导出一个 HTTP 客户端,export const 名字是 apiHttpClient,它的值可以用一下 axios.create 创建一个 axios 实例,这个实例就是我们在请求后端接口的时候使用的 HTTP 客户端。
创建这个实例的时候提供一个配置对象,配置一下 baseURL,它的值是一个要请求的接口的基本地址。把它的值设置成 appConfig 里的 apiBaseUrl。编辑器会帮我们导入 appConfig。
以后在应用里请求后端接口的时候,可以导入使用 app.service 模块里的这个 apiHttpClient,使用它请求后端接口的时候,不需要再指定服务的基本地址了,只需要使用接口的地址就行了。