vueエージェントapiパッケージ

簡単なvueエージェントapiパッケージブロッカー
1.srcファイルと同じレベルのvueを新規作成します.config.js

module.exports = {
    devServer: {
        //              
        proxy: 'https://x.xxxxx.com/api'
    }
}

2.要求遮断器該当遮断器

srcの下位に新しいserverファイル->index.js

import axios from 'axios'
const serves=axios.create({
    // baseURL:'https://x.xxxxxx.com/api',
    timeout:10000
})
//      
serves.interceptors.request.use(config=>{
    // console.log(config);
    return config
},error=>{
    //       
})
//      
serves.interceptors.response.use(res=>{
    // console.log(res);

    return res.data.data
},error=>{
    //         
})
export default serves

3.apiのパッケージ使用

src下位新規apiファイル->index

import serves from '../server'
const getData=function(){
    return new Promise((resolve,reject)=>{
        serves.get('/xxxx/xxx').then(res=>{
            resolve(res)
        })
    })
}
export{
    getData
}

vueでの使用(使用するには導入が必要)

import {getData} from '../api/index';
//            
created(){
    getData().then(res=>{
      console.log(res);
    })
  },

main.jsにaxiosを導入する必要はありません.serverファイルにはカプセル化されています.

import server from './server/index'
Vue.prototype.$http=server