cdn引入axios,如何封装一个公共的请求方法

30 篇文章 1 订阅
<!-- GET请求参数格式化处理js -->
<script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>

<!-- axios请求处理JS-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

不适用jquery的情况下,使用axios封装
后端模板中使用…

const baseUrl = "http://182.61.31.140"
const qs = Qs
// 响应时间
axios.defaults.timeout = 40000
/* 配置请求头 */
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 配置接口地址
axios.defaults.baseURL = baseUrl

axios.interceptors.response.use((res) => {
    // 对响应数据做些事
    if (res.data.status === '200') {
        return Promise.resolve(res)
    }
    return res
}, (error) => {
    if (error.toString().indexOf('401') > 0) {

    } else if (error.toString().indexOf('400') > 0) {
        layer.msg('请求相关参数错误');
    } else if (error.toString().indexOf('408') > 0) {
        layer.msg('请求超时');
    } else if (error.toString().indexOf('404') > 0) {
        layer.msg('请检查网络情况');
    } else if (error.toString().indexOf('500') > 0) {
        layer.msg('服务器宕机了 - _ -');
    }
    return Promise.reject(error)
})

// 公共POST请求
let fetch_POST = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                layer.msg('服务器宕机了!', {icon: 5});
                reject(error)
            })
    })
}

// 公共GET请求
let fetch_GET = (url, params) => {
    // params = qs.stringify(params)
    console.log(params)
    return new Promise((resolve, reject) => {
        axios.get(url, {params: params})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                layer.msg('服务器宕机了!', {icon: 5});
                reject(error)
            })
    })
}

在这里插入图片描述在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值