Vue 简单封装Axios组件

「爱情、让人受尽委屈。」 2021-07-25 01:34 538阅读 0赞

## Vue 简单封装Axios组件 ##

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

我们先开始创建一个文件夹用封装axios  
netwoek文件夹 在里面写三个js文件 （netwoek是在src里面）  
![在这里插入图片描述][20200901142742813.png_pic_center]

**先优先创建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>

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

[20200901142742813.png_pic_center]: /images/20210724/4618782a369f4b89bfcb3377f8a0c39e.png