React的前期准备工作

请求前后的过滤和响应前后的拦截操作都在这里定义

以及对axios的封装也写在一起

编写Request.js文件，在其中完成对请求的所有操作

import axios from "axios";
import {message} from "antd";
axios.defaults.withCredentials=true
// 第一步，创建实例
export const service = axios.create();
// 第二步，请求拦截
service.interceptors.request.use(
    function (config) {
        // 请求发生前处理
        config.headers = {
            // 每次请求前带上Token
            token: window.localStorage.getItem("token")
        }
        return config;
    }, function (error) {
        // 请求错误处理
        console.log(error)
        message.error("服务器被吃了!!")
        console.log("请求错误之后"+error)
        return Promise.reject(error);
    }
);
// 第三步，响应阻拦
service.interceptors.response.use(
    function (response) {
        return response.data;
    }, function (error) {
        // 响应错误处理
        console.log("服务器被吃了!!")
        message.error("服务器被吃了!!")
        return Promise.reject(error);
    }
);
//万一添加前置路径 可变更
//封装请求
export const postRequest=(url,parmes)=>{
    return service.request({
        method:"post",
        url:url,
        data: parmes
    })
}
// 传送json的put请求
export const putRequest = (url, params) => {
    return service.request({
        method: 'put',
        url: url,
        data: params
    })
}
// 传送json的get请求
export const getRequest = (url, params) => {
    return service.request({
        method: 'get',
        url: url,
        data: params
    })
}
// 传送json的delete请求
export const deleteRequest = (url, params) => {
    return service.request({
        method: 'delete',
        url: url,
        data: params
    })
}

创建Api.js

将所有请求方法的调用封装在一起

import {postRequest} from "./Request"
let baseUrl = "http://localhost:8080"
//获取验证码
function getCaptcha(){
    return baseUrl+`/captcha?id=` + Math.random();
}
//登录方法
function loginApi(values){
    return postRequest(baseUrl+"/login", values)
}
export{
    loginApi,
    getCaptcha
}