React网络请求axios

1.介绍

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中

参考使用说明 · Axios 中文说明 · 看云

2.安装依赖

npm install axios --save

3.网络请求方法

（1）get

（2）post

import React from "react";
import axios from 'axios'
import qs from "querystring"

export default class Http extends React.Component {

    componentDidMount() {

        /**
         * post请求中，参数格式为 ：user_id=iwen@qq.com&password=iwen123
         * 将对象形式转成上述参数格式：使用stringify对对象进行序列化
         * */

        axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
            user_id: 'iwen@qq.com',
            password: 'iwen123',
            verification_code: 'crfvw'
        }))
            .then(res => {
                console.log(res.data)
            })
            .catch(error => {
                console.log(error);
            })
    }


    render() {
        return (
            <div>
                网络请求
            </div>
        )
    }
}

结果展示：

（3） all执行多个并发请求

import React from "react";
import axios from 'axios'
import qs from "querystring"

export default class AxiosComponent extends React.Component {

    componentDidMount() {
        const getBanner = () => {
            return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")

        }
        const getChengpin = () => {
            return axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinInfo.php")
        }
        axios.all([getBanner(), getChengpin()]).then(axios.spread((banner, chengpin) => {
            console.log(banner.data);
            console.log(chengpin.data);
        }))
    }

    render() {
        return (
            <div>
                Axios
            </div>
        )
    }
}

4.封装网络请求

​​​​​​​