（實戰專案篇）vue3.0系列（vue2.6-cli3.x） axio的封裝和使用

阿新 • • 發佈：2021-10-28

request.js

import axios from 'axios'
import { Loading, Message } from 'element-ui';


const loading = {
    loadingInstance: null, // Loading 例項
    // 開啟載入
    open: function () {
        // 建立例項,而且會開啟載入 視窗
        console.log(this.loadingInstance, 'loadingInstance')
        if(this.loadingInstance === null) {
            // 如果例項 為空，則建立
            console.log('建立載入例項。。。')
            this.loadingInstance = Loading.service({
                target: '.main',
                text: '拼命載入中...',
                background: 'rgba(0, 0, 0, 0.5)'
             })
        }
       
    },
    // 關閉載入
    close: function () {
        // 不為空時, 則關閉載入視窗
        if(this.loadingInstance !== null) {
            this.loadingInstance.close()
        }
        this.loadingInstance = null
        
    }
}


const request = axios.create({
    // /db.json >  通過 axios > /dev-api/db.json >  通過 代理轉發（vue.config.js）》 http://localhost:8001/db.json
    // baseURL: '/dev-api', 
    baseURL: process.env.VUE_APP_BASE_API, 
    // baseURL: '/',
    timeout: 5000 // 請求超時，5000毫秒
})

// 請求攔截器
request.interceptors.request.use(config => {
    // 開啟載入視窗
    loading.open()

    return config
}, error => {
    // 關閉載入視窗
    loading.close()
    // 出現異常
    return Promise.reject(error);
})

// 響應攔截器
request.interceptors.response.use(response =>{
    // 關閉載入視窗
    loading.close()
    const resp = response.data

    // 後臺正常響應的狀態，如果不是 2000， 說明後臺處理有問題
    if(resp.code !== 2000) {
        Message({
            message: resp.message || '系統異常',
            type: 'warning',
            duration: 5 * 1000
        })
    }

    // return response.data // 可以在這裡統一的獲取後臺響應的資料進行返回，而這裡面就沒有請求頭那些
    return response
}, error => {
    // 關閉載入視窗
    loading.close()
    console.log('response.error', error.response.status)
    Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
    })
    return Promise.reject(error);
})

//  http://localhost:8888/dev-api/db.json 404
// request.get('/db.json').then(response => {
//     console.log(response.data)
// })

export default request // 匯出自定義建立 axios 物件

API使用

// import axios from '@/utils/request'
import request from '@/utils/request'

// /dev-api http://mengxuegu.com:7300/mock/5d477ccbfacc296cd6834fe5/db.json
const BASE_URI = process.env.VUE_APP_BASE_API

// request.get('/db.json').then(response => {
//     console.log(response.data)
// })

// 測試2， 以物件配置的方式進行指定請求方式
request({
    method: 'get',
    // url: BASE_URI + '/db.json'
    url: '/db.json'
}).then(response => {
    console.log('get2', response.data)
})

export default {
    getList() {
        const req = request({
            method: 'get',
            // url: BASE_URI + '/db.json'
            url: '/db.json'
        })
        console.log(req) // Promise.then()
        return req
    }
    
}