在现在的前端开发中，前后端分离开发比较主流，所以在封装方法和模块化上也是非常需要掌握的一门技巧。而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 => {});
的方式，到了需要修改的时候就得需要一个页面一个页面的去找，这样会增加工作量（这个理由又可以摸鱼了()）。