React学习（网络请求）全部代码如下

63 阅读 0 评论 42 点赞

我是靠谱客的博主调皮小虾米，最近开发中收集的这篇文章主要介绍React学习（网络请求）全部代码如下，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一开始在弄网络请求的时候我还以为有很多东西要弄，但是发现其实React的网络请求也就那么几种，首先是自带的fetch请求，这种最基础也不用特意安装；其次是和vue相同的axios，这玩意很通用啊，再者还有专门的react-axios，不过我并没有去研究或者看这个，因为之前用过vue，所以对于axios比较熟悉。

这篇文章主要介绍的就是axios，但是要注意的是和vue不同点就是在初始化的调用方面的处理。

ps：vue是在初始化之后将初始化的变量赋值给vue的自定义全局变量当中，但是React是直接调用的，同时如果自定义初始化则不能调用axios.create()方法，否则会导致拦截器失效。

1、安装axios

执行npm命令：npm isntall axios --save

2、初始化基础请求

import netWorkManager from 'axios'
import logInfo from "../common/Log";
//基础api
const BASE_URL = "http://***************/debug";

//超时时间
const TIMEOUT = 5000;
//设置基础地址
netWorkManager.defaults.baseURL = BASE_URL;
//设置超时时间
netWorkManager.defaults.timeout = TIMEOUT;

3、初始化拦截器

//请求拦截
logInfo("netOptions:", "初始化请求拦截");
netWorkManager.interceptors.request.use(function (requestConfig) {
    logInfo("netOptions:", "请求拦截开始");
    logInfo("netOptions:", "请求base地址---" + requestConfig.baseURL);
    logInfo("netOptions:", "请求地址---" + requestConfig.url);
    logInfo("netOptions:", "请求参数---" + JSON.stringify(requestConfig.data));
    logInfo("netOptions:", "请求拦截结束");
    return requestConfig;
}, function (error) {

});
//响应拦截
logInfo("netOptions:", "初始化响应拦截");
netWorkManager.interceptors.response.use(response => {
    logInfo("netOptions:", "响应拦截开始");
    logInfo("netOptions:", "响应拦截获取响应code---" + response.data.stateCode);
    if (response.data.stateCode === 200) {
        logInfo("netOptions:", "响应拦截结束");
        return response.data.data
    } else {
        logInfo("netOptions:", "响应拦截结束");
        return response
    }
}, error => {

});

4、发起请求

/**
 * 登录请求，
 * @param values 登录参数
 */
export function loginApi(values) {
    logInfo("netOptions:", "发起登录请求")
    netWorkManager.post(getRequestUrl(API_LIST.loginUrl), values)
        .then(response => {
            logInfo("netOptions:", "登录响应数据---" + JSON.stringify(response));
        }).catch(error => {
        logInfo("netOptions:", "登录异常数据---" + error);
    })
}

全部代码如下

import netWorkManager from 'axios'
import logInfo from "../common/Log";


//基础api
const BASE_URL = "http://***********************/debug";

//超时时间
const TIMEOUT = 5000;
//设置基础地址
netWorkManager.defaults.baseURL = BASE_URL;
//设置超时时间
netWorkManager.defaults.timeout = TIMEOUT;
//请求拦截
logInfo("netOptions:", "初始化请求拦截");
netWorkManager.interceptors.request.use(function (requestConfig) {
    logInfo("netOptions:", "请求拦截开始");
    logInfo("netOptions:", "请求base地址---" + requestConfig.baseURL);
    logInfo("netOptions:", "请求地址---" + requestConfig.url);
    logInfo("netOptions:", "请求参数---" + JSON.stringify(requestConfig.data));
    logInfo("netOptions:", "请求拦截结束");
    return requestConfig;
}, function (error) {

});
//响应拦截
logInfo("netOptions:", "初始化响应拦截");
netWorkManager.interceptors.response.use(response => {
    logInfo("netOptions:", "响应拦截开始");
    logInfo("netOptions:", "响应拦截获取响应code---" + response.data.stateCode);
    if (response.data.stateCode === 200) {
        logInfo("netOptions:", "响应拦截结束");
        return response.data.data
    } else {
        logInfo("netOptions:", "响应拦截结束");
        return response
    }
}, error => {

});

//api列表
const API_LIST = {
    loginUrl: "/user/login"
};

/**
 * 获取请求数据
 * @param url 请求参数
 * @return {*} 请求地址
 */
function getRequestUrl(url) {
    return url
}


/**
 * 登录请求，
 * @param values 登录参数
 */
export function loginApi(values) {
    logInfo("netOptions:", "发起登录请求")
    netWorkManager.post(getRequestUrl(API_LIST.loginUrl), values)
        .then(response => {
            logInfo("netOptions:", "登录响应数据---" + JSON.stringify(response));
        }).catch(error => {
        logInfo("netOptions:", "登录异常数据---" + error);
    })
}