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

我就是我 2023-10-06 21:01 6阅读 0赞

#### 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)

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/dbda693085c34fe8901d5b5376b4260a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16