【Vue】axios封装，更好的管理api接口和使用

• 2020 年 6 月 4 日
• 筆記
• Axios, javascript, qs, VUE

在现在的前端开发中，前后端分离开发比较主流，所以在封装方法和模块化上也是非常需要掌握的一门技巧。而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: '//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 => {});

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