【vue】axios二次封装,更好的管理api接口和使用

微信扫一扫,分享到朋友圈

【vue】axios二次封装,更好的管理api接口和使用

在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧。而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的 axios封装
或者 axios二次封装
区别不大,主要是补上了 拦截器
和和简洁一点。

安装axios

npm install axios --save
复制代码

通过挂载的axios(只是为了对比)

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由
import store from "./store"; // Vuex
import axios from "axios";
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
复制代码

页面上使用挂载好的axios

// post
this.$axios.post('products/list', { page: 1, page_size: 10 }).then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
});
复制代码

通过封装的axios

还需要安装qs(qs插件可以将字符串解析和序列化字符串)

npm install qs
复制代码

然后在src下建一个api文件夹,起一个request.js,放入下面代码

import axios from 'axios';
import qs from 'qs';
// 创建axios实例
const service = axios.create({
baseURL: 'http://127.0.0.1/api/', // api的base_url
// withCredentials: true, // 跨域请求时是否发送cookies
timeout: 5000 // 请求超时设置
})
// 请求拦截器
service.interceptors.request.use(config => {
// 请求前做点什么?
if (!config.data) {
config.data = {};
}
// console.log(config)
// 设置公共参数
console.log(qs.stringify(config.data));
return config;
}, error => {
// 处理请求错误
console.log(error); // 用于调试
return Promise.reject(error);
})
// 响应拦截器
service.interceptors.response.use(response => {
// let res = respone.data; // 如果返回的结果是data.data的,嫌麻烦可以用这个,return res
return response;
}, error => {
console.log('error:' + error); // 用于调试
return Promise.reject(error);
})
export default service;
复制代码

接下来继续在api文件夹下面创建一个index.js文件(如果需要分开的话就不要创建index.js,比如登录接口:login.js,用户接口:user.js…)

import request from '@/api/request'; // 引入封装好的axios
// 登录
export function login (data) {
return request({
url: 'login',
method: 'post',
data: data
})
}
// 产品列表
export function productsList () {
return request({
url: '/products/list',
method: 'get'
})
}
复制代码

页面上使用封装好的axios

import { Login } from '@/utils/helpers';
import { productsList } from '@/api'; // 默认引入index.js,如果在这个页面有其他的api就以 , 分开:{ productsList, productsPoster }
export default {
data () {
return {
isLoading: true,
productsList: []
}
},
created () {
this.init();
}
methods: {
// 初始化
init () {
if (!Login()) {
alert('请登录');
this.$router.go(-1)
return false;
} else {
this.getProductsList();
this.isLoading = false;
}
},
// 获取产品列表
getProductsList () {
// get
productsList().then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
});
// post
productsList({ page: 1, page_size: 10 }).then(res => {
if (res.status == 200) {
this.productsList = res.data;
}
}).catch(err => {
console.log(err);
});
}
}
}
复制代码

以上就是这篇axios封装的所有内容了,看到这里的伙伴们如果有不明白的地方请留言哦,如果写的不好也可以留言吐槽!!!

总结

axios封装的好处在于方便的管理api,我认为这是很好的方式,而且有 统一
处理的 拦截器
,如果在每个页面都以

this.$axios.get('/api/login').then(res => {});
复制代码

的方式,到了需要修改的时候就得需要一个页面一个页面的去找,这样会增加工作量(虽然这个理由可以摸鱼( ^▽^
))。

微信扫一扫,分享到朋友圈

【vue】axios二次封装,更好的管理api接口和使用

基于Bpmn-js的流程设计器校验实现

上一篇

[图]Android端Gmail更新:右下角“+”图标改为“Compose”按钮

下一篇

你也可能喜欢

【vue】axios二次封装,更好的管理api接口和使用

长按储存图像,分享给朋友