P23:React高级-axios数据请求

目录
文章目录隐藏
  1. 安装 Axios
  2. npm install -save 和 -save-dev 分不清
  3. axios 请求数据
  4. 总结

有了生命周期的知识,这节课学习远程数据请求的知识,小伙伴们肯定都知道,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 请求非常重要,动手练习一下吧。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P23:React高级-axios数据请求

发表回复