- 安装axios
npm i axios
- 创建请求文件夹
src下创建request文件,
src>request>request.js:
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://47.93.114.103:3001',
timeout: 15000
})
//请求拦截
instance.interceptors.request.use((config) => {
return config
}, (err) => {
return Promise.reject(err)
})
//响应拦截
instance.interceptors.response.use((config) => {
return config
}, (err) => {
return Promise.reject(err)
})
export default instance
src>request>api.js:
import request from './request'
// 获取列表数据
export const getListDate = (data) => request.get('/nav', data)
- 发送请求
在Detail.js中
import React, { Component } from 'react'
import { getListDate } from '../request/api' //引入请求的api
import '../css/detail.css'
export default class Detail extends Component {
state = {
listDate: []
}
render() {
return (
<div>
<h3>详情页</h3>
<ul className="det-list">
{
this.state.listDate.map((item, index) => {
return (
<li key={index}>
<div className="product-name">{item.name}</div>
<img className="product-img" src={item.pic} alt="" />
</li>
)
})
}
</ul>
</div>
)
}
componentDidMount() {
// 请求数据
this.getListDateFn()
}
getListDateFn() {
// 请求数据
getListDate().then(res => {
console.log(res.data);
this.setState({
listDate: JSON.parse(JSON.stringify(res.data))
}, () => {
console.log( this.state.listDate);
})
})
}
}