axios 配置

配置

目錄: src / network / request.js
I : 建立axios實例,配置baseURL，timeout，hander...
-- baseURL 統一IP地址
II: 配置請求時攔截
-- 好比校驗config中的一些信息是否符合服務器的要求
-- 好比每次發送網絡請求時，都但願在界面顯示一個請求的圖標(loadding)
-- 某些網絡請求（好比token）,必須攜帶一些特殊的信息
III: 響應時攔截
-- 返回須要的數據...
-- 異常處理
IV:默認導出instance

import axios from 'axios'

const instance = axios.create({
    // 
    baseURL: 'http://' + location.hostname + ':1234/vcancbs/',
    timeout: 5000
})

instance.interceptors.request.use(config => {
    //...
    console.log(config)
    return config
}, error => {
    console.log(error)
})

instance.interceptors.response.use(response => {
    // ...
    console.log(response )
    return response.data
}, error => {
    console.log(error)
})

export default instance

封裝

目錄: src / network / api.js
在api.js文件中 import axios from './request'
順便封裝了get、post、delete、方便調用,如需使用其餘自行添加

import axios from './request'
/* 
 get
 @param {路徑,參數對象}
*/
export const _get = (url, query) => {
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: query
        })
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    })
}

/* 
 post
 @param {路徑,參數對象}
*/
export const _post = (url, query) => {
    return new Promise((resolve, reject) => {
        axios.post(url, query)
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

/* 
 delete
 @param {路徑,參數對象}
*/
export const _delete = (url, query) => {
    return new Promise((resolve, reject) => {
        axios.delete(url, query)
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

全局引入

目錄：src / main.js
在main.js文件中 import { _get, _post, _delete} from './network/api'，而後添加Vue全局屬性$get、$post、$delete,Vue.prototype.xxx = arg

import Vue from 'vue'
import App from './App.vue'
import { _get, _post, _delete} from './network/api'
Vue.prototype.$get = _get
Vue.prototype.$post = _post
Vue.prototype.$delete = _delete
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

使用 : const f = (url,  param) => {  this.$post(url,  {  ...  }).then(res  => { ... }).catch(err => { ... })}

getFun(){
  this.$get('bingniter/getOrderInfo',{id:'bingniter-2020-10-24'}).then( response => {
    console.log(response)
  }, error => {
    console.log(error)
  })
}

postFun(){
  this.$post('bingniter/getDataSource',{id:'bingniter-2020-10-24',name:'BingNiTer'}).then( response => {
    console.log(response)
  }, error => {
    console.log(error)
  })
}