1.進(jìn)入項(xiàng)目，安裝axios

npm install axios

2.對(duì)axios二次封裝

/model/axios.js

import Axios from 'axios';
import qs from 'qs';
const axios = Axios.create();
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.interceptors.request.use((config) => {

    if (config.method === 'post') {
        config.data = qs.stringify(config.data);
    }

    return config;
});
// Add a response interceptor
axios.interceptors.response.use(
    (response) => {
        // Do something with response data
        let data = response.data;
        response.data = data.data;

        return response;
    },
    (error) => {
        // Do something with response error
        return Promise.reject(error);
    }
);
export default axios;

3.頁面引入axios.js,請(qǐng)求數(shù)據(jù)

import React, { Component } from 'react';
import axios from '../model/axios';

class Axios extends Component {
    constructor(props){
        super(props);
        this.state = {
            list: []
        }
    }
    getData = () => {
        axios.get('https://www.easy-mock.com/mock/5b4eb12d56c59c6f56266215/api/order_list')
        .then((response) => {
            this.setState({
                list: response.data
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    render(){
        return (
            <div>
                <button onClick={this.getData}>獲取axios數(shù)據(jù)</button>
                {
                    this.state.list.map((item,key) => {
                        return (
                            <li key={key}>
                                {item.title}
                            </li>
                        )
                    })
                }
            </div>
        )
    }
}
export default Axios;

END----------