NextJs 请求数据 (fetch axios)
在使用nextJs请求数据之前 首先我们来说一下 nextJs
- nextJs是一个轻量级的react服务端渲染应用框架,所以他不用考虑前端经常要涉及到的跨域
- 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的方式请求数据
- 首先 我们需要封装axios 下载axios
npm install axios -S
- 在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
- 书写api方法
import { getAxios, postAxios } from '@/utils/axios'
const url = '/a/b'
export const getArticle = (params) => {
return getAxios({url, params})
- 组件使用 在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