vue如何封装axios

Vue如何封装Axios

封装Axios是为了后期维护更换接口方便减少大量维护时间而且方便快捷，也是为了一次封装之后在后期可以多次使用接口

图片:
首先先创建nextwork文件夹

1.在network中创建三个文件

core.js
index.js
config.js

###首先在core.js中配置

import axios from "axios";
import { METHOD } from "./config"

//创建带配置项的axios实例

const instance = axios.create({
    baseURL: "https://api.it120.cc/small4",
    timeout: 3000
})


//请求的基础方法

export function request(method, url, params) {
    switch (method) {
        case METHOD.GET:
            return GET(url, params);
        case METHOD.POST:
            return POST(url, params)
    }
}


//GET
function GET(url, params) {
    return instance.get(url, params)
}


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

###然后在config中配置

export const METHOD={
    GET:"get",
    POST:"post"
}

export const PATH={
    get_store_list:"/shop/goods/list"
}

###index中配置

import { request } from "./core";
import { METHOD, PATH } from "./config"


const APIClient = {

    /*
    获取商品列表数据

    params：{
        page：""页码",
        pagesize："每页条数""
    }

    */

    getStoreList(page, pageSize) {
        return request(METHOD.GET, PATH.get_store_list, { page: page, pageSize: pageSize })
    }
}

export default APIClient

main.js中配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' 
import APIClient from "./network/index"  //配置信息

Vue.prototype.$APIClient = APIClient    //配置信息

Vue.config.productionTip = false      //配置信息

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

然后在views中就可以使用了

views中创建文件 Home.vue

<template>
  <div>

  </div>
</template>

<script>
export default {
mounted(){
  this.$APIClient.getStoreList().then(res=>{
    console.log(res);
  })
}
}
</script>

<style>

</style>