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

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 (
        
            {router.query.name},实战课程上新了 .{list}
            返回首页
        
    )
}

这样我们就利用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 (
        
            {router.query.name},实战课程上新了 .{list}
            返回首页
        
    )
}

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)