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来获取远端数据的的操作,这个在实际项目中是必备技能,所以需要多练习几遍。

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

发表评论

提供最优质的资源集合

立即查看 了解详情