vue中拆分封装axios
【摘要】
1、在src目录下建network文件用于配置axios`。 2、在network里面先建一个config.js文件
export const GET="get"; //定义并导出GET请求
exp...
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中的路由拼接),调用谁拼接谁
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
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里的多级路由拼接
});
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)
};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
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里接收全局引入
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5、在main.js里接收全局引入
import network from './network/index' //全局引入在那都能调用
Vue.prototype.$network=network
- 1
- 2
6、之后就可以在组件中调用了
mounted() {
this.$network //调用network中的getStoreList({参数--用于传给params})
.getStoreList({
page: 1,
pageSize: 2
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
文章来源: jiangwenxin.blog.csdn.net,作者:前端江太公,版权归原作者所有,如需转载,请联系作者。
原文链接:jiangwenxin.blog.csdn.net/article/details/107007380
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)