react_app 项目开发 (6)_后台服务器端-node

后台服务器端

负责处理前台应用提交的请求，并向前台返回 json 数据

前台应用 负责

展现数据与用户交互

发 ajax 请求与后台应用交互

yarn add axios

/src/api/ajax.js

/*
    自定义封装 axios ---- https://github.com/axios/axios
        返回值： Promise 对象
*/
export default function ajax(url, data={}, method="GET"){
    /****  自定义封装 Promise 对象 ****/
    return  new Promise((resolve, reject)=>{
        let promiseAxios;
        if(method === "GET"){
            promiseAxios = axios,get(url, {params: data});
        }else if(method === "POST"){
            promiseAxios = axios.post(url, data);
        }else{
            throw new Error("方法 method 错误");
        }
        promiseAxios.then(result=>{
            resolve(result);
        }).catch(error=>{
            console.log(error);
            message.error("请求出错了");
            throw new Error("请求出错了");
        });
    });
}

/****
async function login(){
    const result= await ajax(
        "/login", 
        {uName: 'Tom', uPWD: '112233'},
         "POST"
    );
    if(result.statue === 0){...}else{...}
}
****/

/src/api/login.js

import requestLogin from "xxx"
...
this.props.form.validateFields(()=>{
    if(error){
    
    }else{
        const result = await requestLogin(values);    
    }
})
...

/**** 以上写法意味着 ajax 需要进一步封装 /src/api/index.js
import ajax from "./ajax"
// export function requestLogin(data){
//     return ajax(“/login”, data, "POST");
// }

export default const requsetAPI = {
    login(data){
        return ajax(“/login”, data, "POST");
    },
    addUser(data){
        return ajax(“/manage/user/add”, data, "POST");
    },
}
****/

保存用户登录状态