前后台交互ajax请求模块

npm i axios -d

//在packge.json内配置proxy，配置请求基础路径

"proxy":"http://localhost:5000"

/*

 能发送异步ajax请求的函数模块

 封装 axios库

 函数的返回值:是一个promise对象 (可以用.then()/ async await 进行异步处理)

*/

//引入axios库

import axios from 'axios';

//引入axios库的模块

export default function ajax(url, data={}, method='GET'){

    if(method==='GET'){// 判断：发送 GET 请求

        return axios.get(url,{// 配置对象

            // params:{ID:12345}

            params:data //指定请求参数

        })

    }else{//发POST请求

        return axios.post(url,data)

    }

}

//请求登陆接口

ajax('/login',{username:'tom',password:'123456'},'POST').then();

//添加用户

ajax('/manage/user/add',{username:'tom',password:'123456',phone:'13353545556'},'POST').then()

//任何一个操作都需要自己手动编写请求，所以过于繁琐复杂
//因此可配置api/index.js 来请求用户参数

//api/index

/*

包含n个接口请求函数的模块

每个函数返回promise

*/

import ajax from 'ajax';

//登陆

export const reqLogin = (username,password) => ajax('/login',{username,password},'POST')

export const reqAddUser = (user) => ajax('/manage/user/add',user,'POST')

/*

能发送ajax请求的函数模块

    包装axios

    函数的返回值是promise对象

    axios.get()/post()返回的就是promise对象

    返回自己创建的promise对象:

        统一处理请求异常

        异步返回结果数据，而不是包含结果数据的response

*/

import axios from 'axios';

import { message } from 'antd';

export default function ajax(url, data = {}, method='GET'){

    return new Promise((resolve, reject) =>{

        let promise

        //执行异步请求

        if(method == 'GET'){

            promise = axios.get(url,{params:data}) //params 配置指定的是query参数

        }else{

            promise = axios.post(url,data)

        }

        promise.then(response=>{

            // 如果成功了，嗲用resolve(response.data)

            resolve(response.data)

        }).catch(error => {// 对所有ajax请求出错做统一处理，外层就不用再处理错误了

            //如果失败了，提示请求后台出错

            message.error('请求错误:'+error.message)

        })

    })

}