Vue封装网络模块步骤

Vue封装网络模块

第一步

在scr里面创建一个network文件夹

第二步

在network文件夹里面创建三个文件

第一个文件夹 config.js，在里面写入以下`

// 定义请求方式
export const Method = {
    
    
    GET:"get",
    POST:"post"
}

export const PATH = {
    
    
    // 首页接口
    shouye_list:"/home/multidata"
}

第二个文件夹 core.js ， 在里面写入以下

// 引入axios
import axios from "axios"
// 引入config文件
import {
    
    Method} from "./config";

// 通过配置对象返回一个axios实例对象
const instance = axios.create({
    
    
    // 路由地址（前面相同）
    baseURL:"http://123.207.32.32:8000/api/x6",
    // 请求超时时间
    timeout:10000
})

export function request(method,url,parasm){
    
    
    switch(method){
    
    
        case Method.GET:
            return GET(url,parasm);
        case Method.POST:
            return POST(ulr,parasm)
    }
}

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

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

在第三个 index.js 文件夹里面写以下

// 引入core文件
import {
    
    request} from "./core"
// 引入config文件
import {
    
    Method,PATH} from "./config"

const netClient = {
    
    
  // 首页路径
  shouye_list(params){
    
    
    return request(Method.GET,PATH.shouye_list,params)
  },
}

// 抛出netClient
export default netClient;

第三步

写完需要在min.js里面引入

// 网络模块
import netClient from "./network/index"
// 网络模块
Vue.prototype.$netClient = netClient;

第四步

可以在home.vue里面测试一下

mounted(){
    
    
    this.$netClient.shouye_list().then(res=>{
    
    
      console.log(res.data.data)
    })
  }