Don ' t tunggu! Mengejutkan API

Pembangunan aplikasi web moden sering melibatkan gandingan longgar antara front-end dan back-end, sering dikendalikan oleh pasukan berasingan. Ini boleh membawa kepada cabaran penyegerakan. Penyelesaiannya adalah untuk mensimulasikan API back-end, mewujudkan pelayan "palsu" yang meniru tingkah laku yang diharapkan. Proses ini dikenali sebagai mengejek . Idealnya, mengejek membolehkan pembangunan front-end untuk meneruskan secara bebas, tanpa kebergantungan back-end langsung. Walaupun pelbagai pendekatan mengejek wujud, ini boleh menjadi menakutkan.

Artikel ini menunjukkan pengejaran API yang berkesan dan pelaksanaannya dalam aplikasi baru atau sedia ada menggunakan pendekatan rangka kerja-agnostik (berkenaan dengan mana-mana rangka kerja atau vanila JavaScript).

Mirage: Penyelesaian Mengejek Bahagian Pelanggan

Kami akan menggunakan MirageJs, rangka kerja mengejek pelanggan. Mirage beroperasi dalam penyemak imbas, memintas XMLHttpRequest dan Fetch permintaan untuk mensimulasikan respons API. Ia menyediakan antara muka mesra pengguna dan memudahkan proses mengejek.

Kami akan membina aplikasi yang mudah dilakukan menggunakan VUE (walaupun pendekatan itu adalah kerangka kerja).

Menyediakan Mirage

Pasang Mirage:

 # npm
npm i miragejs -d

# Benang
benang tambah miragejs -d

Struktur folder optimum:

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

Buat api/mock/index.js :

 // api/mock/index.js
import {server} dari 'mirageJs';

Fungsi lalai eksport ({everence = 'development'} = {}) {
    Kembalikan pelayan baru ({
        persekitaran,
        laluan () {
            // Laluan yang ditakrifkan di sini
        },
    });
}

Dalam fail bootstrap aplikasi anda (misalnya, src/main.js untuk vue):

 // main.js
import createeserver dari './api/mock/index';

jika (process.env.node_env === 'pembangunan') {
    createServer ();
}

Bersyarat ini memastikan mirage dikecualikan daripada pengeluaran pengeluaran.

Bagaimana Mirage berfungsi

Mirage adalah pihak pelanggan, menggunakan Perpustakaan Pretender. Pretender memintas permintaan, menghalang mereka daripada mencapai pelayan sebenar dan mengarahkannya ke pelayan Mirage yang disimulasikan. Tab Rangkaian Devtools tidak akan menunjukkan permintaan Mirage, kerana mereka ditangani secara dalaman.

Permintaan pengendalian

Mari buat A /api/tasks Endpoint untuk mengambil item To-Do (menggunakan AXIOS):

 // komponen/tugas.vue
Eksport Lalai {
    async dicipta () {
        Cuba {
            const {data} = menunggu axios.get ('/api/tugas');
            this.tasks = data.tasks;
        } menangkap (e) {
            Console.error (e);
        }
    }
};

Pada mulanya, Mirage akan log ralat yang menunjukkan laluan yang tidak ditentukan. Kami menangani ini dengan menambahkan pengendali laluan di api/mock/index.js :

 // api/mock/index.js
laluan () {
    this.get ('/api/tugas', () => ({
        Tugas: [
            {id: 1, teks: "Feed the Cat"},
            {id: 2, teks: "Basuh hidangan"},
        ],
    }));
},

Mirage menyokong pelbagai kaedah HTTP ( get , post , patch , put , delete , options ).

Data dinamik dengan lapisan data Mirage

Untuk data dinamik, Mirage menyediakan cangkuk seeds dan pangkalan data ringan. Mari refactor:

 // api/mock/index.js
biji (pelayan) {
    server.db.loadData ({
        Tugas: [
            {id: 1, teks: "Feed the Cat"},
            {id: 2, teks: "Basuh hidangan"},
        ],
    });
},

laluan () {
    this.get ('/api/tugas', (skema) => {
        pulangan skema.db.tasks;
    });
    this.post ('/api/tugas', (skema, permintaan) => {
        const task = json.parse (request.requestBody) .data;
        pulangan skema.db.tasks.insert (tugas);
    });
    this.delete ('/api/tugas/: id', (skema, permintaan) => {
        const id = request.params.id;
        pulangan skema.db.tasks.remove (ID);
    });
}

Parameter schema dalam pengendali laluan menyediakan akses kepada pangkalan data Mirage. Parameter request mengandungi butiran permintaan.

Mengintegrasikan Mirage ke aplikasi yang ada

Untuk mengintegrasikan Mirage ke dalam aplikasi yang sedia ada, gunakan kaedah passthrough() untuk mengendalikan permintaan yang tidak diasingkan:

 laluan () {
    this.get ('/api/tugas', () => {...});
    this.passthrough (); // Mengendalikan permintaan yang tidak diasingkan
}

Anda juga boleh menentukan urlPrefix tersuai:

 laluan () {
    this.urlprefix = 'https: //devenv.ourapp.example';
    this.get ('/tugas', () => {...});
}

Ini membolehkan peralihan lancar antara Mirage dan API sebenar.

Kesimpulan

MirageJS menawarkan penyelesaian yang diselaraskan dan pelanggan untuk mengejek API, menghapuskan keperluan untuk proses luaran atau pengetahuan sisi pelayan. Kemudahan penggunaan dan ciri-ciri yang kuat menjadikannya alat yang berharga untuk pemaju depan. Rujuk dokumentasi MirageJS rasmi untuk ciri dan tutorial yang lebih canggih. Contoh kerja boleh didapati di GitHub.

Atas ialah kandungan terperinci Don ' t tunggu! Mengejutkan API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!