【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 => {});

的方式，到了需要修改的時候就得需要一個頁面一個頁面的去找，這樣會增加工作量（這個理由又可以摸魚了(^▽)）。