NextJs 请求数据 （fetch axios）

NextJs 请求数据 （fetch axios）

在使用nextJs请求数据之前 首先我们来说一下 nextJs

1. nextJs是一个轻量级的react服务端渲染应用框架，所以他不用考虑前端经常要涉及到的跨域
2. nextJs不用写router即路由的配置 只需在pages下创建js文件 即生成路由路径 例如 创建about.js 就可以用过localhost: 3000/about访问的到

请求数据

官方推荐的是fetch 注意 fetch中的路径应是完整的路径

function About({ data }) {
    console.log(data) //在这里打印的可在控制台输出
    return (
        <div>
            {
                data.map( item => (
                    <li key={item.id}>{item.title}</li>
                ))
            }
        </div>
    )
}

export const getStaticProps = async () => {
    let result = await fetch('http://apitest.dianzhijia.com/api/open/article?page=1',{
        headers: {
            Accept: 'application/vnd.dpexpo.v1+json' //设置请求头
        },
        method: 'get',
    })
    let res = await result.json() //必须通过此方法才可返回数据
    const {data: {data}} = res
    return {
        props: {
            data //props值传导render函数中
        }
    }
}

export default About

在项目中我是用的是axios的方式请求数据

1. 首先 我们需要封装axios 下载axios

npm  install axios -S

2. 在utils下新建axios

import axios from 'axios'

let baseURL
if( process.env.NODE_ENV === 'production' ) {
    baseURL = '上线的地址'
} else {
    baseURL = '开发的地址'
}

// 拦截器
axios.interceptors.response.use((response) => {
    return response
}, (error) => {
    return Promise.reject(error)
})
axios.interceptors.request.use((config) => {
    console.log(config)
    config.headers['Accept'] = 'application/vnd.dpexpo.v1+json'
    config.baseURL = baseURL
    config.timeout = 10000
    return config;
}, (error) => {
    return Promise.reject(error)
})

// axios的get请求
export function getAxios({
    url,
    params={}
}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params,
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            console.log(err, '1')
            reject(err)
        })
    })
}

// axios的post请求
export function postAxios({
    url,
    data
}) {
    return new Promise((resolve, reject) => {
        axios({
            url,
            method: 'post',
            data
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}

export default axios

3. 书写api方法

import { getAxios, postAxios } from '@/utils/axios'
const url = '/a/b'

export const getArticle = (params) => {
  return getAxios({url, params})

4. 组件使用 在pages下新建js文件

import { getArticle } from './api/article'
function About({ data }) {
    console.log(data)
    return (
        <div>
            {
                data.map( item => (
                <li key={item.id}>{item.title}</li>
                ))
            }
        </div>
    )
}

export const getStaticProps = async () => {
    let result = await getArticle({per_page: 1})
    let { data: { data } } = result
    return {
        props: {
            data
        }
    }
}

export default About