分享一下我在creat-react-app里面使用axios

首先分享一下我的目录结构

1.安装axios  参考链接 axios中文网|axios API 中文文档 | axios

2.request.js对axios二次封装 以post请求为列

import axios from 'axios';

function post(url, data = {},) {
	let postData = data;
 	return new Promise((resolve, reject) => {
		axios({
			method: 'post',
			url: url,
			data: postData,
		}).then(response => {
			resolve(response.data);
		})
	})
};
// 添加请求拦截
axios.interceptors.request.use(
	config => {
		console.log(config);
		var token = sessionStorage.getItem("token");
		if(token){
			config.headers.Authorization = 'bearer	'+token;
		}
		if(config.url != '/accounts/loginByCode'){
			config.headers.saasTenantToken = 'xxxxxx'
		}
		return config;
	},
	err => {
		return Promise.reject(err);
	});
//添加响应拦截器
axios.interceptors.response.use((response) => {
	return response;
}, function(error) {
	if(error.response.status === 401) {
		// router.push({
		// 	path: "/login",
		// });
	}
	return Promise.reject(error);
})
export{
	post,
}

3.interface.js 对接口统一管理

4.setupProxy.js 配置代理

// 配置代理
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
    app.use(
      createProxyMiddleware('/accounts', {
        target: 'http://www.xxx.com/accounts/', 
        changeOrigin: true,
        pathRewrite: {
          '^/accounts': ''
        }
      })
    )
}

5.使用 以用户登录为例

// 引入 请求 get post
import{get,post} from '../../util/request.js';
// 登录 获取验证码 接口
import {accountsValidateGetLoginCode,accountsLoginByCode} from '../../util/interface.js';

// 表单提交
    onFinish = (values) => {
        let postData = Object.assign({
            customChannel: 3,
            source: "1",
            userType: 0
        },values)
        post(accountsLoginByCode,postData).then((res)=>{
            if(res.recode === '000000'){
                let data = res.data;
                window.sessionStorage.setItem('token',data.access_token);
                window.sessionStorage.setItem('nickname',data.nickname);
                window.sessionStorage.setItem('departId',data.departId);
                window.sessionStorage.setItem('uid',data.uid);
                // 这边本应该获取侧边
                this.props.history.push({
                    pathname:'/admin/home',
                })
            }else{
                message.error(res.remsg)
            }
        })
    };

6.总结

        1.使用方便,使用的时候只需要传入 接口和参数就OK了。

        2.实现了接口的统一管理,方便维护。

        3.避免了一个请求封装一个函数，调用的时候看着混乱的请求，头大。