Vue 简单封装Axios组件

Vue 简单封装Axios组件

axios封装组件就是为了Vue中的便携开发 为了不在每个一个Vue中写
axios请求 而导致的反复请求 为了后期的开发快捷

我们先开始创建一个文件夹用封装axios
netwoek文件夹 在里面写三个js文件 （netwoek是在src里面）

先优先创建config.js 封装get 和 post 方法

export const Method = {
  Get:"get",
  Post:"post"
}
//定义两种请求方式
//添加接口  
export const Path={
    //商品列表
   YanxuanList:'/shop/goods/list',
  

}

然后在创建core.js

//引入axios
import axios from 'axios'
//引入封装网络接口config
import {Method} from  './config'
//设置配置一个对象返回axios实例
const  instance  =axios.create({
    // 设置的地址  APi前半部分相同地方
    baseURL:"https://api.it120.cc/small4",
    timeout:10000
    //设置的超时时间
})
export function request(method,url,parasm){
    switch(method){
        case Method.Get:
        return Get(url,parasm)
        case Method.Post:
        return Post(url,parasm)
    }
}
function Get(url,parasm){
    return instance.get(url,parasm)
}

function Post(url,params){
    return instance.post(url,params)
}

最后在创建index.js 用于抛出到main.js 里面

import  {request} from './core'
import  {Method,Path} from './config'

const netClient = {
    // 首页
    YanxuanList(params){
      return request(Method.Get,Path.YanxuanList,params)
    },
  }
  
  // 抛出netClient
  export default netClient;

最后在Main.js 导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//封装的Api组件 把组件导出
import netClient from  './netwoek/index'
Vue.prototype.$netClient = netClient;

Vue.config.productionTip = false

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

最后在Home中测试

<template>
  <div>
    
  </div>
</template>

<script>
export default{
  data() {
    return {
      
    }
  },mounted(){
    this.$netClient.YanxuanList().then(res=>{
      console.log(res)
    })
  }
}
</script>

最后就可以在页面拿到数据