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

最新推荐文章于 2023-04-02 21:46:07 发布

王老师打pp

最新推荐文章于 2023-04-02 21:46:07 发布

阅读量2k

点赞数

分类专栏：我的csdn 文章标签： react.js axios creactReactApp

本文链接：https://blog.youkuaiyun.com/wxfdpp/article/details/121564536

版权

我的csdn 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在项目中使用axios进行二次封装，创建了一个名为post的函数，用于简化POST请求。同时，设置请求和响应拦截器处理headers及错误情况。接口管理通过interface.js统一，而setupProxy.js配置代理解决跨域问题。这样做的好处在于提高了代码复用性和可维护性，避免了混乱的请求函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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)
            }
        })
    };