vue項目中簡單進行axios封裝及響應狀態碼提示！

import Vue from 'vue'

import axios from 'axios'
import { Toast,Indicator,MessageBox } from 'mint-ui';//使用於vue項目中Toaset進行錯誤提示
//取消請求

let CancelToken = axios.CancelToken

//設置默認請求頭，若是不須要能夠取消這一步

// axios.defaults.headers = {

//     'X-Requested-With': 'XMLHttpRequest'

// }

// 請求超時的時間限制

axios.defaults.timeout = 20000

// 開始設置請求 發起的攔截處理

// config 表明發起請求的參數的實體

axios.interceptors.request.use(config => {

// 獲得參數中的 requestName 字段，用於決定下次發起請求，取消對應的 相同字段的請求

// 若是沒有 requestName 就默認添加一個 不一樣的時間戳

let requestName

if(config.method === 'post'){

    if(config.data && config.data.requestName){

        requestName = config.data.requestName

    }else{

        requestName = new Date().getTime()

    }

}else{

    if(config.params && config.params.requestName){

        requestName = config.params.requestName

    }else{

        requestName = new Date().getTime()

    }

}

// 判斷，若是這裏拿到的參數中的 requestName 在上一次請求中已經存在，就取消上一次的請求

if (requestName) {

    if (axios[requestName] && axios[requestName].cancel) {

        axios[requestName].cancel()

    }

    config.cancelToken = new CancelToken(c => {

        axios[requestName] = {}

        axios[requestName].cancel = c

    })

}

return config

}, error => {

        return Promise.reject(error)

    })



// 請求到結果的攔截處理
    
    axios.interceptors.response.use(config => {

// 返回請求正確的結果

return config

}, error => {

// 錯誤的請求結果處理，這裏的代碼根據後臺的狀態碼來決定錯誤的輸出信息

if (error && error.response) {

    switch (error.response.status) {

        case 400:

            error.message = '錯誤請求' ; Toast('錯誤請求');

            break

        case 401:

            error.message = '未受權，請從新登陸' ; Toast('未受權，請從新登陸');

            break

        case 403:

            error.message = '拒絕訪問' ; Toast('拒絕訪問');

            break

        case 404:

            error.message = '請求錯誤,未找到該資源' ; Toast('請求錯誤,未找到該資源');

            break

        case 405:

            error.message = '請求方法未容許' ; Toast('請求方法未容許');

            break

        case 408:

            error.message = '請求超時' ; Toast('請求超時');

            break

        case 500:

            error.message = '服務器端出錯' ; Toast('服務器端出錯');

            break

        case 501:

            error.message = '網絡未實現' ; Toast('網絡未實現');

            break

        case 502:

            error.message = '網絡錯誤' ; Toast('網絡錯誤');

            break

        case 503:

            error.message = '服務不可用' ; Toast('服務不可用');

            break

        case 504:

            error.message = '網絡超時' ; Toast('網絡超時');

            break

        case 505:

            error.message = 'http版本不支持該請求' ; Toast('http版本不支持該請求');

            break

        default:

            error.message = `鏈接錯誤${error.response.status}`   ; Toast(`'鏈接錯誤'${error.response.status}`);

    }

} else {

    error.message = "鏈接到服務器失敗";  Toast('鏈接到服務器失敗');

}

return Promise.reject(error.message)

})

// 將axios 的 post 方法，綁定到 vue 實例上面的 $post

Vue.prototype.$post = function (url, params) {

return new Promise((resolve, reject) => {

    axios.post(url, params)

        .then(res => {

            resolve(res)

        }).catch(err => {

        reject(err)

    })

})

}

// 將axios 的 get 方法，綁定到 vue 實例上面的 $get
Vue.prototype.$get = function (url, params) {

return new Promise((resolve, reject) => {

    axios.get(url, {

        params: params

    }).then(res => {

        resolve(res) // 返回請求成功的數據 data

    }).catch(err => {

        reject(err)

    })

})

}

// 請求示例

// requestName 爲多餘的參數 做爲請求的標識，下次發起相同的請求，就會自動取消上一次尚未結束的請求

// 好比正常的請求參數只有一個 name: '123'，可是這裏咱們須要額外再加上一個 requestName

/**
   //post請求實例

   this.$post(this.url2, {

name: "王",

docType: "pson",

requestName: 'name02'

}).then(res => {

    console.log(res)

  })

 //get請求實例
 
this.$get(this.url, {

    name: "李",

    requestName: 'name01'

}).then(res => {

    console.log(res)

})

 */



export default axios 
複製代碼

將此文件引入main.js中再須配置

axios.defaults.baseURL = 'http://baidu.com' //須手動配置全局axios的訪問地址