P23:React高级-axios数据请求

有了生命周期的知识,这节课学习远程数据请求的知识,小伙伴们肯定都知道,ajax可以远程请求,但是这写起来太麻烦了,我们用程序的ajax请求框架Axios来实现。

安装Axios

Axios的安装可以使用npm来进行安装,你可以直接在项目根目录下,输入下面的代码。

npm install -save axios

输入 后就可以正在的开始安装了。

npm install -save 和 -save-dev分不清

  • npm install xxx: 安装项目到项目目录下,不会将模块依赖写入devDependenciesdependencies
  • 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请求。并且请求到了数据,给我们返回了。

React高级-axios数据请求

总结

这节课学习了Axios的简单用法,并用最简单的方式,请求到了一个掘金网站的数据接口。ajax请求在你的项目中,会经常使用,也是我们读取和写入数据的一个桥梁,所以学习React的过程中,使用Axios作ajax请求非常重要,动手练习一下吧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P23:React高级-axios数据请求

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发