在src文件夹中添加一个network文件夹

network文件夹下有三个文件 分别是index.js config.js 和 core.js

index.js:

import {request} from "./core"
//引入request
import {GET,POST,path} from "./config"

//network抛出到组件中 组件中就有了数据
const network = {
//调用request方法 并给request方法传递相关参数
    getStoreList(params){return request(GET,path.list,params)},
    getClassifyList(params){return request(POST,path.classify,params)}
}
export default network;

core.js:

import { GET, POST } from './config'
import axios from "axios"
const instance = axios.create({
//在这里定义一个主要的baseURL 拼接config中的path来获取数据
    baseURL: 'https://api.it120.cc',
})
//抛出一个request方法 request方法 主要是进行判断从index中传递过来的请求方式 来进行不同方法的 获取数据 request中的参数也是从index中传递过来的参数
export function request(method, url, params) {
    switch (method) {
        case GET:
        //执行下方get方法 传参
            return get(url, params)
        case POST:
        //执行下方post方法 传参
            return post(url, params)
    }
}
function get(url,params) {
    return instance.get(url, params)
}
function post(url,params) {
    return instance.post(url, params)
}

config.js:

export const GET="get";
export const POST="post";
export const path = {
//通过变更path中的地址内容来进行不同接口数据的获取
    list:"/small4/shop/goods/list",
    classify:"/small4/shop/goods/category/all"
  }

以上文件代码完成后需要在main.js中配置全局的network
在main.js中添加以下代码：

import network from "./network/index"
Vue.prototype.$network = network

在组件中进行调用即：

this.$network.getClassifyList({
     //参数
    }).then((res)=>{
      console.log(res)
    }).catch((error)=>{
      console.log(error)
    })