您当前的位置: 首页 >  ios

P06:通过getInitialProps方法用Axios获取远端数据

发布时间:2021-12-18 17:39:00 ,浏览量:5

Next.js 教程
  • 阐述
  • 安装和引入Axios插件
  • getInitialProps 中获取数据
阐述

在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,因为是远程获取数据,所以我们采用异步请求的方式。

import axios from 'axios' Javascript.getInitialProps = async() =>{ const promise = new Promise((resolve)=>{ axios('http://tt.cc') .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的所有代码。

next-create\pages\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('http://tt.cc') .then((res) => { console.log(res.data.name) resolve(res.data.name) }) }) return await promise } export default withRouter(Javascript) 

在这里插入图片描述

关注
打赏
1688896170
查看更多评论

暂无认证

  • 5浏览

    0关注

    115984博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文
立即登录/注册

微信扫码登录

0.3929s