前后台交互ajax请求模块

Posted 2020-11-26 Tommy_marc

下载依赖包axios

npm i axios -d

最基本的axios异步请求

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

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