码迷,mamicode.com
首页 > Web开发 > 详细

前后台交互ajax请求模块

时间:2019-12-11 17:05:12      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:let   错误   处理   依赖   error   err   基本   返回结果   不用   

下载依赖包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)
        })
    })
}

前后台交互ajax请求模块

标签:let   错误   处理   依赖   error   err   基本   返回结果   不用   

原文地址:https://www.cnblogs.com/tommymarc/p/12023552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!