react 结合 axios 异步请求封装

安装 ：

npm install axios

开始封装：

新建一个http.js，通过promise进行异步，axios进行请求。

import axios from 'axios';
import { message } from 'antd';
const mainUrl = '';
const http = {};
http.get = (url) => {
    return new Promise((resolve, rejiect) => {
        axios.defaults.headers.common['token'] = localStorage.getItem('token');
        axios({
            method: 'get',
            url: mainUrl + url,
        }).then((res) => {
            resSuccess(resolve, rejiect, res)
        }).catch(function (error) {
            message.error('请求有误')
            rejiect(error)
        })
    })
};
http.post = (url, data) => {
    return new Promise((resolve, rejiect) => {
        axios.defaults.headers.common['token'] = localStorage.getItem('token');
        axios({
            method: 'post',
            url: mainUrl + url,
            data: data
        }).then((res) => {
            resSuccess(resolve, rejiect, res)
        }).catch((error) => {
            message.error('请求有误')
            rejiect(error)
        })
    })
};
function resSuccess(resolve, rejiect, res) {
    let datas = res.data
    if (datas.errorCode === 0) {
        resolve(datas);
    } else {
        message.error(datas.msg)
        rejiect(datas);
    }
}
export default http;

新建api.js

统一管理请求地址，方便后期维护

export default {
    login: '/login',
    homePage:'/HomePage',
    addTeam: '123456',
}

使用：

//引入 api,http
import http from '../api/http';
import api from '../api/api';

//调用请求
http.get(api.login,values).then((res)=>{
    console.log('结果',res);
}).catch(() => {
    console.log('失败')
})

可以在vue等其他node安装项目中使用