1. Lý do đóng gói

Việc đóng gói Axios là cần thiết bởi vì trong quá trình phát triển ứng dụng, bạn sẽ sử dụng Axios rất nhiều lần để thực hiện các yêu cầu HTTP. Để tăng tính bảo trì và dễ dàng quản lý mã nguồn sau này, chúng ta thường tạo ra một lớp hoặc hàm bọc (wrapper) cho Axios.

2. Sử dụng Interceptor

Interceptor trong Axios giúp chúng ta xử lý dữ liệu trước khi gửi đi hoặc sau khi nhận về từ server. Có hai loại interceptor:

• Interceptor trước khi gửi yêu cầu (request)
• Interceptor trước khi xử lý phản hồi (response)

3. Quy trình đóng gói

Bắt đầu bằng cách cài đặt Axios và querystring:

npm install axios querystring

Tạo tệp request.js trong thư mục utils của dự án:

import axios from "axios";
import qs from "querystring";

// Xử lý lỗi theo trạng thái HTTP
const handleError = (status, message) => {
    switch (status) {
        case 400: console.log("Lỗi cú pháp"); break;
        case 401: console.log("Chưa được xác thực"); break;
        case 403: console.log("Không có quyền truy cập"); break;
        case 404: console.log("Tài nguyên không tồn tại"); break;
        case 500: console.log("Lỗi máy chủ nội bộ"); break;
        default: console.log(message);
    }
};

// Tạo đối tượng Axios tùy chỉnh
const client = axios.create({
    baseURL: "http://example.com", 
    timeout: 5000,
});

// Interceptor cho request
client.interceptors.request.use(
    config => {
        if (config.method === "post") {
            config.data = qs.stringify(config.data);
        }
        return config;
    },
    error => Promise.reject(error)
);

// Interceptor cho response
client.interceptors.response.use(
    response => (response.status === 200 ? Promise.resolve(response) : Promise.reject(response)),
    error => {
        const { response } = error;
        handleError(response?.status || 500, response?.data?.message || "Lỗi không xác định");
        return Promise.reject(error);
    }
);

export default client;

4. Tạo API Wrapper

Tạo một thư mục api với hai tệp path.js và index.js:

const endpoints = {
    base: "http://iwenwiki.com",
    productDetails: "/api/blueberrypai/getChengpinDetails.php"
};

export default endpoints;

import http from "../utils/request";
import urls from "./path";

const services = {
    fetchProductDetails() {
        return http.get(`${urls.base}${urls.productDetails}`);
    }
};

export default services;

5. Sử dụng trong component

Ví dụ trong file HelloWorld.vue:

<template></template>

<script>
import api from "../api/index";

export default {
    name: "HelloWorld",
    props: {
        msg: String
    },
    mounted() {
        api.fetchProductDetails().then(response => {
            console.log(response.data);
        });
    }
};
</script>