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

<!-- 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)
            })
    })
}

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章