vue中拆分封装axios

简介: vue中拆分封装axios

1、在src目录下建network文件用于配置axios`。

2、在network里面先建一个config.js文件

export const GET="get";   //定义并导出GET请求
export const POST="post";  //定义并导出POST请求
export const path={                 //定义路由对象并抛出
    list:"/small4/user/detail",     //定义路由(多级路由与core中axios中的路由拼接),调用谁拼接谁
}

3、在network中建一个core.js文件

import {GET,POST} from "./config";   //导入config
import axios from "axios";        //安装axios并引入
const instance =axios.create({      //创建一个拥有通用配置(如:路由等)axios实例
    baseURL:"https://api.it120.cc"  //通用路由与config里的多级路由拼接
});
exportfunction request(method,url,params){   //封装一个函数并导出,类似于this.$axios.get(url,{})
    switch(method){                     //switch语句判断是get还是poat请求
        case GET:           //如果是get就调用下面封装的get请求并返回
            return get(url,params)     
        case POST:        //post
            return post(url,params)
    }
};
functionget(url,params){       //封装get请求
    return instance.get(url,params)   //调用上面axios实例并return返回
};
function post(url,params){      //封装post请求
    return instance.get(url,params)
};


4、在network中建一个index.js文件

import {request} from "./core"   //导入core
import {GET,POST,path} from './config'   //导入config
const network={          //声明一个对象
    getStoreList(params){return request(GET,path.list,params)}
    //自定义事件名      调用core中的request函数发送get请求,path.list是调用config里的多级路由
}
export default network   //抛出network对象  在main.js里接收全局引入

5、在main.js里接收全局引入

import network from './network/index'  //全局引入在那都能调用
Vue.prototype.$network=network

6、之后就可以在组件中调用了

mounted() {
    this.$network   //调用network中的getStoreList({参数--用于传给params})
      .getStoreList({
        page: 1,
        pageSize: 2      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
目录
相关文章
|
3月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
109 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
3月前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
279 59
|
3月前
|
缓存 JavaScript 搜索推荐
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
179 4
|
3月前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
196 7
|
3月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
181 1
|
3月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
231 1
|
3月前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
19 0
|
3月前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
140 0

热门文章

最新文章