axios send request

1. • install axios

npm i axios

2. • Create request folder

Create a request file under src,

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)

3. • send request

in 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);
            })

        })
    }
}