Axios配置

axios配置主要包括：初始化公共配置、请求拦截、相应拦截

（1）第一步：创建Axios实例化对象，初始化一些公共配置

/**
 * 创建axios实例对象
 */

const instance = axios.create({
    // 公共配置
    baseURL: "http://iwenwiki.com",
    timeout: 5000
})

（2）添加请求拦截器：处理post请求的参数问题（在客户端的请求发送到服务器之前做些处理）

/**
 * 添加请求拦截器:post参数问题（需要序列化的参数）
 */
instance.interceptors.request.use(
    // 在发送请求之前做什么
    config => {
        if (config.method === 'post') {
            // post请求需要序列化
            config.data = qs.stringify(config.data)
        }
        return config
    },
    // 对请求错误做点什么
    error => Promise.reject(error)
)

（3）添加响应拦截器：对服务器响应的数据以及错误做点什么

/**
 * 添加响应拦截器
 */
instance.interceptors.response.use(
    // 对响应数据做点什么
    response => {
        response.status === 200 ? Promise.resolve(response) : Promise.reject(response)

    },
    // 对响应错误做点什么
    error => {
        const {response}=error;
        errorHandle(response.status,response.info)
    }
)

（错误处理函数：根据服务器的状态码，打印对应的信息）

/**
 * 处理失败的方法
 * status: 状态码
 * ****  2xx ：成功  
 *       3xx : 请求的资源重定向到其他网页  
 *       4xx ： 客户端错误  
 *       5xx ： 服务器内部错误
 * info: 失败的信息
 */
const errorHandle=(status,info)=>{
    switch(status){
        case 400:
            console.log('语义有误，当前去请求无法被服务器理解！');
            break;
        case 401:
            // token
            console.log('服务器认证错误！当前请求需要用户验证。');
            break;
        case 403:
            console.log('服务器已经理解请求，但拒绝执行！');
            break;
        case 404:
            console.log('请检查网络请求地址');
            break;
        case 500:
            console.log('服务器遇到了一个未曾预料的状况，导致它无法完成对请求的处理。');
            break;
        case 502:
            console.log('作为网关或者代理的服务器尝试请求时，从上游服务器接收到无效的响应');
            break;
        default:
            console.log(info);
            break;
    }
}

（4）使用自己封装的axios

import React from "react";

// 引入自己封装的axios
import axios from '../utils/request'

export default class AxiosComponent extends React.Component {

    componentDidMount() {
        // 调用
        axios.get("/api/blueberrypai/getIndexBanner.php")
            .then(res => {
                console.log(res.data);
            })


    }

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