P23:React高级-axios数据请求
目录
有了生命周期的知识,这节课学习远程数据请求的知识,小伙伴们肯定都知道,ajax
可以远程请求,但是这写起来太麻烦了,我们用程序的 ajax 请求框架Axios
来实现。
安装 Axios
Axios
的安装可以使用 npm 来进行安装,你可以直接在项目根目录下,输入下面的代码。
npm install -save axios
输入 后就可以正在的开始安装了。
npm install -save 和 -save-dev 分不清
npm install xxx
: 安装项目到项目目录下,不会将模块依赖写入devDependencies
或dependencies
。npm install -g xxx
:-g
的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看npm cinfig prefix
的位置npm install -save xxx
:-save
的意思是将模块安装到项目目录下,并在package
文件的dependencies
节点写入依赖。npm install -save-dev xxx
:-save-dev
的意思是将模块安装到项目目录下,并在package
文件的devDependencies
节点写入依赖。
作为一个前端,要清楚的知道npm install
这四种用法,防止项目依赖错误,在别人下载你的代码没办法跑起来。
axios 请求数据
安装好axios
之后,需要在使用ajax
的地方先引入axios
,比如现在想在Meinv.js
中使用axios
,写入下面的代码进行引入:
import axios from 'axios'
引入后,可以在componentDidMount
生命周期函数里请求 ajax,我也建议在componentDidMount
函数里执行,因为在 render 里执行,会出现很多问题,比如一直循环渲染;在componentWillMount
里执行,在使用 RN 时,又会有冲突。所以强烈建议在componentDidMount
函数里作ajax
请求。
componentDidMount(){ axios.post('https://i.snssdk.com/log/sentry/v2/api/slardar/batch/') .then((res)=>{console.log('axios 获取数据成功:'+JSON.stringify(res)) }) .catch((error)=>{console.log('axios 获取数据失败'+error)}) }
上面的代码是以掘金的一个接口为例,做了一次ajax
请求。并且请求到了数据,给我们返回了。
总结
这节课学习了Axios
的简单用法,并用最简单的方式,请求到了一个掘金网站的数据接口。ajax 请求在你的项目中,会经常使用,也是我们读取和写入数据的一个桥梁,所以学习React
的过程中,使用Axios
作 ajax 请求非常重要,动手练习一下吧。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P23:React高级-axios数据请求
码云笔记 » P23:React高级-axios数据请求