vue中對axios進行封裝

全菜程式設計師發表於2018-12-25
VueiOS封裝

在剛結束的專案中對axios進行了實踐（好不容易碰上一個不是jsonp的專案），

以下為在專案中對axios的封裝，僅封裝了post方法，因為專案中只用到了post，如有需要請自行進行修改

src/config.js

//api介面字首
export const apiBaseUrl = `http://xxx.xxx.xxx.xxx:8888/test/`

src/axios.js

import axios from `axios`
import qs from `qs`
import { apiBaseUrl } from `./config.js`



//請求攔截器
axios.interceptors.request.use(function (param) {
    return param
}, function (error) {
    // 請求錯誤
    return Promise.reject(error)
})


// 新增響應攔截器
axios.interceptors.response.use(function (response) {
    return response.data
}, function (error) {
    // 響應錯誤
    return Promise.reject(error)
})

// 封裝axios--------------------------------------------------------------------------------------
function apiAxios(url, params) {
    let httpDefault = {
        method: "POST",
        baseURL: apiBaseUrl,
        url: url,
        data: qs.stringify(params),
    }

    return new Promise((resolve, reject) => {
        axios(httpDefault)
            // 此處的.then屬於axios
            .then((res) => {
                resolve(res)
            }).catch((response) => {
                reject(response)
            })
    })
}


export default {
    install: function (Vue) {
        Vue.prototype.$axios = (url, params) => apiAxios(url, params)
    }
}

src/main.js

import axios from "@/axios.js"

Vue.use(axios)

 

相關文章