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数据请求的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。