前后台交互ajax请求模块

下载依赖包axios

npm i axios -d

//在packge.json内配置proxy，配置请求基础路径
"proxy":"http://localhost:5000"

最基本的axios异步请求

/api/ajax.js

/* 
 能发送异步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请求模块

/* 
能发送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)
        })
    })
}