React-axios

最新推荐文章于 2024-06-02 09:51:06 发布

zhcinit0

最新推荐文章于 2024-06-02 09:51:06 发布

阅读量532

点赞数 1

分类专栏： axios 文章标签： react reactjs

本文链接：https://blog.csdn.net/zhcinit0/article/details/104838733

版权

axios 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React 使用Axios全局绑定

很久没有用react的框架写东西了，正好手上有个管理系统项目，拿来练练手。
我在项目里使用的是axios，主要和大家分享一下，把axios作为全局方法绑定到react上，这样就不用在没有页面或者组件里引入了，废话不多说直接上。

一、安装axios

npm install axios --save (需要安装node环境)

二、对axios再次封装

在src目录下创建axios文件夹，在axios文件夹下创建index.js目录，代码如下：

/**
 *
 * ajax全局配置
 *
 */
import axios from 'axios';

// axios 配置
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers['Content-Type'] = 'application/json'; //配置请求头
// axios.defaults.headers.post['Content-Type'] = 'application/json'; //配置请求头
// axios.defaults.headers.get['Content-Type'] = 'application/json'; //配置请求头
// axios.defaults.headers.delete['Content-Type'] = 'application/json'; //配置请求头
// axios.defaults.headers.put['Content-Type'] = 'application/json'; //配置请求头

// 当实例创建时设置默认配置
axios.defaults.baseURL = 'http://127.0.0.1';

//http request 拦截器
axios.interceptors.request.use((config) => {
    // config.setHeaders([
    //     // 在这里设置请求头与携带token信息
    // ]);
    return config
}, (error) => {
    return Promise.reject(error);
});

//http response 拦截器:返回状态判断（添加响应拦截器）
axios.interceptors.response.use(
    response => {
        if (response.data.code === 40008) {
            // 40008 说明 token 验证失败
            // 可以直接跳转到登录页面，重新登录获取 token
            window.location.reload();//刷新页面，如果该页面需要登录，则会自动跳转到登录页面
            return {
                code:12000,
                message:"登录过时,退出请重新登录"
            };
        }
        return response.data;
    },
    error => {
        return Promise.reject(error.response) // 返回接口返回的错误信息
    }
);

export default axios;

这里的配置可以根据项目需求和逻辑需求进行配置，也可以用自己封装的方法，当然这也不是必须要配置的

三、在根目录的index.js中引入封装的方法如下：

import React from 'react';
import axios from './axios/index';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

React.$axios = axios;
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

需要注意的是react与vue不同不能够像vue那样挂载在prototype上挂载，所以直接使用
React.$axios = axios;
如果不需要封装axios，那这里的import axios from ‘./axios/index’;引入直接换成axios即可；

四、最后在页面中使用

import React from 'react';
import '../css/login.css';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
const onFinish = values => {
    console.log('Received values of form: ', values);
    React.$axios.post('/findUsers',{username:'15882004659'}).then((res)=>{
        console.log(res)
    }).catch((err)=>{
        console.log(err)
    })
  };