美文网首页
React-Reducer中封装普通的axios请求

React-Reducer中封装普通的axios请求

作者: Mr培 | 来源:发表于2019-12-01 13:58 被阅读0次
    1. 全局请求拦截 config.js
    import axios from 'axios'
    // 全局设定请求类型
    // axios.defaults.headers.post['Content-Type'] = 'application/json'
    //拦截请求
    // axios.interceptors.request.use(function (config) {
    //     return config
    // });
    //拦截响应
    axios.interceptors.response.use(function (config) {
        console.log(config.data.code);
        return config
    });
    
    1. 请求封装get,post
    import axios from "axios";
    import qs from "qs";
    import {Toast} from "antd-mobile";
    
    const CODE ='CODE';
    const LOAD_DATA ='LOAD_DATA';
    
    const initState = {
        route:'',
        code:0,
        data:[],
        msg:''
    };
    
    
    export function data(state = initState,action) {
        switch (action.type) {
            case LOAD_DATA:
                return {...state,data:action.payload,route:action.route};
            case CODE:
                return {...state,code:action.payload};
            default:
                return state
        }
    }
    
    function loadData(data,route) {
        return {type:LOAD_DATA,payload:data,route}
    }
    
    function toastFail(msg) {
        Toast.fail(msg, 1);
        return {type:CODE,payload:msg}
    }
    
    function toastInfo(msg,code) {
        Toast.info(msg, 1);
        return {type:CODE,payload:code}
    }
    
    export function ex_get (url, params = {}) {
        return dispatch=>{
            axios.get(
                url,
                qs.stringify(params)
        ).then(res => {
            if (res.status === 200){
                if (res.data.code === 0) {
                    dispatch(loadData(res.data.data))
                }else{
                    dispatch(toastInfo(res.data.msg+'!!!',res.data.code))
                }
            }
        }).catch(() => {
                dispatch(toastFail('网络连接超时!!!'))
        })}
    }
    
    
    export function ex_post (url, params = {},route) {
        return dispatch=>{
            axios.post(
                url,
                qs.stringify(params)
            ).then(res => {
                if (res.status === 200){
                    if (res.data.code === 0) {
                        dispatch(loadData(res.data.data,route))
                    }else{
                        dispatch(toastInfo(res.data.msg+'!!!',res.data.code))
                    }
                }
        }).catch(() => {
                dispatch(toastFail('网络连接超时!!!'))
        })}
    }
    
    1. 统一接口调度
    import {ex_post} from '../redux/comReducer'
    import {Toast} from "antd-mobile";
    let myReg= /^1[3-578]\d{9}$/;
    
    //校验手机号
    export function checkPhone(phone) {
        let data = {
            isSend:false,
            phone:phone
        };
        const ph = phone.replace(/\s+/g,"");
        if (!ph) {
            Toast.info('请填写手机号!!!', 1);
        }else{
            if (!myReg.test(ph)) {
                Toast.info('请填写正确的手机号!!!', 1);
            } else{
                data.isSend = true;
                data.phone = ph;
            }
        }
        return data;
    }
    
    //发送验证码
    export function sendCode(params) {
        return ex_post('/api/session/send/code',params);
    }
    
    //注册
    export function register(params) {
        return ex_post('/api/session/register/account',params,'/rUserInfo');
    }
    
    //登录
    export function login(params) {
        return ex_post('/api/session/login',params,'/index');
    }
    
    //忘记密码
    export function forGet(params) {
        return ex_post('/api/session/reset/pwd',params,'/');
    }
    

    相关文章

      网友评论

          本文标题:React-Reducer中封装普通的axios请求

          本文链接:https://www.haomeiwen.com/subject/puyzwctx.html