axios請求封裝,實現get,post(json格式),postForm(表單提交)方法

在我們項目開發過程中,離不開與後臺的交互,那就是我們常說的掉接口,在脫離了jquery開發體系,在我們的框架vue,react,等的開發中axios脫穎而出,下文代碼示例工作中自己封裝的請求。


import axios from 'axios';
import { message } from 'antd';
import qs from 'qs';
import config from '@config/config';
import React from 'react';

const request = {};
message.config({
    duration: 2,
    maxCount: 1
});

const next = (cb) => {
    return (res) => {
        if ((res.status >= 200 && res.status < 300) && res.data && res.data.success) {
            if (res.data.message) {
                message.success(<span className='comment'>{res.data.message}</span>);
            }
            cb(res.data);
        } else {
            cb(res.data);
            if (res.data.message) {
                message.error(<span className='comment'>{res.data.message}</span>);
            }
        }
    };
};

const error = () => (e) => {
    message.error(<span className='comment'>{e.message}</span>);
};

request.get = (url, params, cb)=>{
    url = config.server + url;
    axios.get(url, {params: params})
        .then(next(cb))
        .catch(error());
};

request.post = (url, data, cb)=>{
    url = config.server + url;
    axios.post(url, data, {})
        .then(next(cb))
        .catch(error());
};

// 適用於Content-Type'爲'application/x-www-form-urlencoded post請求
request.postForm = (url, data, cb,)=>{
    url = config.server + url;
    const header = {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}};
    axios.post(url, qs.stringify(data), header)
        .then(next(cb))
        .catch(error());
};

export default request;

如有錯誤請指正!!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章