P06:通过getInitialProps方法用Axios获取远端数据
在Next.js
框架中提供了getInitialProps
静态方法用来获取远端数据,这个是框架的约定,所以你也只能在这个方法里获取远端数据。不要再试图在声明周期里获得,虽然也可以在ComponentDidMount
中获得,但是用了别人的框架,就要遵守别人的约定。
安装和引入 Axios 插件
Axios
是目前最或的前端获取数据的插件了,也是由大神首推的数据接口请求插件,我在工作中也是一直在使用它,所以这里依然使用Axios
来进行远端数据请求。在请求前需要先安装Axios
插件。
打开终端,直接使用 npm 命令进行安装。
npm install --save axios
或者使用 yarn 命令进行安装。
yarn add axios
安装完成后,在需要的页面中用import
引入axios
,代码如下:
import axios from 'axios'
引入后,就可以使用getInitialProps
进行获取后端接口数据了。
getInitialProps
中获取数据
在javascript.js
页面中使用getInitialProps
,因为是远程获取数据,所以我们采用异步请求的方式。我的测试数据存在了 Easy Mock 中,你也可以在官网自己作一个数据源。
Javascript.getInitialProps = async() =>{ const promise = new Promise((resolve)=>{ axios('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/javascript/getList') .then((res) => { console.log(res) resolve(res.data.data) }) }) return await promise } export default withRouter(Javascript)
获得数据后,我们需要把得到的数据传递给页面组件,用{}
显示出来就可以了。
const Javascript = ({router,list})=>{ return ( <> <div>{router.query.name},实战课程上新了 .<br/>{list}</div> <Link href="/"><a>返回首页</a></Link> </> ) }
这样我们就利用 Axios 从远端获取了数据,为了方便你学习,这里给出javascript.js
的所有代码。
import { withRouter} from 'next/router' import Link from 'next/link' import axios from 'axios' const Javascript = ({router,list})=>{ return ( <> <div>{router.query.name},实战课程上新了 .<br/>{list}</div> <Link href="/"><a>返回首页</a></Link> </> ) } Javascript.getInitialProps = async() =>{ const promise = new Promise((resolve)=>{ axios('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/javascript/getList') .then((res) => { console.log(res) resolve(res.data.data) }) }) return await promise } export default withRouter(Javascript)
总结
本文主要学习了在Next.js
框架下在getInitialProps
方法中利用Axios
来获取远端数据的的操作,这个在实际项目中是必备技能,所以需要多练习几遍。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P06:通过getInitialProps方法用Axios获取远端数据
码云笔记 » P06:通过getInitialProps方法用Axios获取远端数据