前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中拆分封装axios

vue中拆分封装axios

作者头像
江咏之
发布2022-06-16 08:34:04
2530
发布2022-06-16 08:34:04
举报
文章被收录于专栏:技术社区

1、在src目录下建network文件用于配置axios`。 2、在network里面先建一个config.js文件

代码语言:javascript
复制
export const GET="get";   //定义并导出GET请求
export const POST="post";  //定义并导出POST请求

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

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

代码语言:javascript
复制
import {GET,POST} from "./config";   //导入config
import axios from "axios";        //安装axios并引入




const instance =axios.create({      //创建一个拥有通用配置(如:路由等)axios实例
    baseURL:"https://api.it120.cc"  //通用路由与config里的多级路由拼接
});

 
export function 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)
    }
};

function get(url,params){       //封装get请求
    return instance.get(url,params)   //调用上面axios实例并return返回
};
function post(url,params){      //封装post请求
    return instance.get(url,params)
};

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

代码语言:javascript
复制
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里接收全局引入

代码语言:javascript
复制
import network from './network/index'  //全局引入在那都能调用
Vue.prototype.$network=network

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

代码语言:javascript
复制
 mounted() {
    this.$network   //调用network中的getStoreList({参数--用于传给params})
      .getStoreList({
        page: 1,
        pageSize: 2
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档