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

在這裏插入圖片描述在這裏插入圖片描述

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