Tetap kering menggunakan AXIOS untuk permintaan API

Sebarang aplikasi web yang berkomunikasi dengan pelayan backend tidak boleh dilakukan tanpa permintaan HTTP. Data depan memerlukan data, jadi ia meminta data melalui permintaan HTTP rangkaian (atau biasanya dikenali sebagai Ajax) dan pelayan mengembalikan jawapannya. Hampir setiap laman web melakukan ini entah bagaimana hari ini.

Untuk laman web yang besar, kita boleh mengharapkan untuk melihat lebih banyak permintaan seperti ini. Lebih banyak data, lebih banyak API, dan lebih banyak kes istimewa. Memandangkan saiz laman web berkembang, sangat penting untuk terus teratur. Konsep klasik kering (jangan ulangi diri sendiri), yang merujuk kepada proses kod abstrak untuk mengelakkan pendua. Ini sesuai kerana ia biasanya membolehkan kita menulis kod sekali, menggunakannya di beberapa tempat, dan mengemas kini di satu tempat, dan bukannya dalam setiap contoh.

Kami juga boleh menggunakan perpustakaan untuk membantu kami. Bagi Ajax, Axios adalah pilihan yang popular. Anda mungkin sudah biasa dengannya, dan juga menggunakannya untuk jawatan mandiri dan mendapatkan permintaan semasa pembangunan.

Pemasangan dan asas

Ia boleh dipasang menggunakan npm (atau benang):

 NPM Pasang Axisos

Permintaan pos mandiri menggunakan Axios kelihatan seperti ini:

 axios.post ('https://axios-app.firebaseio.com/users.json', formdata)
  .THEN (RES => CONSOLE.LOG (RES))
  .catch (error => console.log (ralat))

JavaScript asli Terdapat juga banyak cara untuk melaksanakan kod JavaScript. Perlu diperhatikan bahawa mengambil (). Jadi mengapa menggunakan perpustakaan? Pertama sekali, pengendalian ralat Fetch sangat pelik. Dari awal, menggunakan Axios akan lebih mudah. Jika anda ingin melihat perbandingan, kami mempunyai artikel yang meliputi kedua -dua kaedah dan satu lagi membincangkan nilai kaedah abstrak ini.

Sebab lain untuk menggunakan Axios? Ia memberi kita lebih banyak peluang kering, jadi mari kita lihat.

Konfigurasi Global

Kami boleh menyediakan konfigurasi global (contohnya, dalam fail Main.js kami) yang mengendalikan semua permintaan aplikasi menggunakan konfigurasi standard , yang ditetapkan melalui objek lalai yang datang dengan AXIOS.

Objek ini mengandungi:

• BASEURL: URL relatif yang digunakan sebagai awalan semua permintaan, dan setiap permintaan boleh dilampirkan ke URL.
• Tajuk: tajuk tersuai yang boleh ditetapkan mengikut permintaan
• Masa tamat: Titik masa apabila permintaan dibatalkan, biasanya dalam milisaat. Nilai lalai adalah 0, yang bermaksud ia tidak berkenaan.
• Withcredentials: Menunjukkan sama ada kelayakan harus digunakan untuk permintaan kawalan akses lintas tapak. Lalai adalah palsu.
• ResponseType: Menunjukkan jenis data yang akan dikembalikan oleh pelayan. Pilihan termasuk JSON (lalai), arraybuffer, dokumen, teks, dan aliran.
• ResponseCoding: Menunjukkan pengekodan yang digunakan untuk menyahkod tindak balas. Nilai lalai ialah UTF8.
• XSRFCOOKENAME: Nama cookie yang digunakan sebagai nilai token XSRF, nilai lalai adalah XSRF-token.
• XSRFHEADERNAME: Nama tajuk HTTP yang menjadi tuan rumah nilai token XSRF. Nilai lalai ialah X-XSRF-token.
• MaxContentLength: mentakrifkan saiz maksimum (dalam bait) kandungan tindak balas HTTP yang dibenarkan
• MaxBodyLength: mentakrifkan saiz maksimum (dalam bait) kandungan permintaan HTTP yang dibenarkan

Kebanyakan masa, anda hanya akan menggunakan baseurl, header, dan mungkin tamat masa. Selebihnya kurang digunakan kerana mereka mempunyai lalai pintar, tetapi senang mengetahui kewujudannya jika anda perlu menetapkan permintaan.

Inilah yang kering. Untuk setiap permintaan, kami tidak perlu mengulangi BaseUrl API atau mengulangi tajuk penting yang kami perlukan dalam setiap permintaan.

Berikut adalah contoh di mana API kami mempunyai alamat asas, tetapi ia juga mempunyai pelbagai titik akhir yang berbeza. Pertama, kami menetapkan beberapa nilai lalai:

 // main.js
import axios dari 'axios';

axios.defaults.baseurl = 'https://axios-app.firebaseio.com' // url awalan axios.defaults.headers.get ['menerima'] = 'aplikasi/json'/ Komponen, kita boleh menggunakan Axios dengan lebih ringkas, tanpa menetapkan tajuk ini, tetapi masih mempunyai peluang untuk menyesuaikan titik akhir URL akhir:

// form.js komponen import axios dari 'axios';

Eksport Lalai {
  Kaedah: {
    onsubmit () {
      // URL kini https://axios-app.firebaseio.com/users.json
      axios.post ('/users.json', formdata)
        .THEN (RES => CONSOLE.LOG (RES))
        .catch (error => console.log (ralat))
    }
  }
}

Nota: Contoh ini dalam Vue, tetapi konsep ini meluas ke mana -mana persekitaran JavaScript.

Contoh tersuai

Menetapkan contoh tersuai adalah serupa dengan konfigurasi global, tetapi dengan skop terhad kepada komponen yang ditentukan. Jadi ia masih merupakan teknologi kering, tetapi dengan hierarki.

Kami akan menubuhkan contoh tersuai kami dalam fail baru (mari namakannya Authaxios.js) dan mengimportnya ke dalam komponen "Ikut".

 // authaxios.js
Import Axios dari 'Axios'

const customInstance = axis.create ({
  BaseUrl: 'https://axios-app.firebaseio.com'
})
customInstance.defaults.headers.post ['menerima'] = 'Application/JSON'

// atau seperti ini ...
const customInstance = axis.create ({
  BaseUrl: 'https://axios-app.firebaseio.com',
  Headers: {'Accept': 'Application/JSON'}
})

Kemudian kami mengimport fail ini ke dalam komponen borang:

 // form.js komponen // import import axios dari './Authaxios'

Eksport Lalai {
  Kaedah: {
    onsubmit () {
      axios.post ('/users.json', formdata)
        .THEN (RES => CONSOLE.LOG (RES))
        .catch (error => console.log (ralat))
    }
  }
}

Pemintas

Pemintas boleh mengendalikan situasi di mana konfigurasi global atau contoh tersuai mungkin terlalu umum, yang bermaksud bahawa jika anda menetapkan tajuk dalam objek mereka, ia akan digunakan untuk tajuk untuk setiap permintaan dalam komponen yang terjejas. Interceptor dapat mengubah sifat objek secara dinamik. Sebagai contoh, kita boleh menghantar tajuk yang berbeza berdasarkan apa -apa syarat yang kita pilih dalam pemintas (walaupun kita menetapkan tajuk dalam objek).

Interceptors boleh berada dalam fail main.js atau dalam fail contoh tersuai. Permintaan itu dipintas selepas dihantar dan membolehkan kami menukar pengendalian respons.

 // Tambahkan permintaan interceptor axios.interceptors.request.use (fungsi (config) {
  // Lakukan sesuatu sebelum menghantar permintaan, sebagai contoh, kami memasukkan masa tamat hanya untuk permintaan dengan baseUrl tertentu (config.baseurl === 'https://axios-app.firebaseo..com/users.json') {
    config.timeout = 4000
  } else {
    Kembalikan konfigurasi
  }
  Console.log (config)
  Kembalikan konfigurasi;
}, fungsi (ralat) {
  // Melaksanakan beberapa operasi atas kesilapan permintaan kembali janji.RECK (ralat);
});

// Tambahkan tindak balas pemintas axios.interceptors.response.use (fungsi (respons) {
  /
    Router.Replace ('Homepage')
  } else {
    Alert ('Kelakuan Pengecualian')
  }
  Console.log (Response)
  tindak balas pulangan;
}, fungsi (ralat) {
  // Melaksanakan beberapa operasi atas kesilapan tindak balas kembali janji.rejek (ralat);
});

Interceptors, seperti namanya, memintas permintaan dan tanggapan untuk mengambil tindakan yang berbeza berdasarkan apa -apa syarat yang disediakan. Sebagai contoh, dalam permintaan Interceptor di atas, kami hanya memasukkan masa tamat keadaan apabila permintaan mempunyai asas tertentu. Untuk respons, kita boleh memintasnya dan mengubah suai apa yang kita kembali, seperti menukar laluan atau menunjukkan kotak amaran, bergantung kepada kod status. Kami juga boleh menyediakan pelbagai syarat berdasarkan kod ralat yang berbeza.

Memandangkan projek itu berskala, anda mula mempunyai banyak laluan dan laluan bersarang, yang semuanya berkomunikasi dengan pelayan berdasarkan pencetus yang berbeza, dan pemintas akan sangat berguna. Sebagai tambahan kepada syarat -syarat yang saya tetapkan di atas, terdapat banyak situasi lain yang mungkin memerlukan penggunaan pemintas, bergantung kepada projek anda.

Menariknya, kita boleh muncul pemintas untuk menghalangnya daripada mempunyai kesan. Kita perlu memberikan pemintas kepada pembolehubah dan pop keluar menggunakan kaedah pop timbul yang betul.

 const reqinterceptor = axios.interceptors.request.use (function (config) {
  // Lakukan sesuatu sebelum menghantar permintaan, sebagai contoh, kami memasukkan masa tamat hanya untuk permintaan dengan baseUrl tertentu (config.baseurl === 'https://axios-app.firebaseo..com/users.json') {
    config.timeout = 4000
  } else {
    Kembalikan konfigurasi
  }
  Console.log (config)
  Kembalikan konfigurasi;
}, fungsi (ralat) {
  // Melaksanakan beberapa operasi atas kesilapan permintaan kembali janji.RECK (ralat);
});

// Tambah tindak balas tindak balas resinterceptor = axios.interceptors.response.use (fungsi (respons) {
  /
    Router.Replace ('Homepage')
  } else {
    Alert ('Kelakuan Pengecualian')
  }
  Console.log (Response)
  tindak balas pulangan;
}, fungsi (ralat) {
  // Melaksanakan beberapa operasi atas kesilapan tindak balas kembali janji.rejek (ralat);
});

axios.interceptors.request.Eject (ReqInterceptor);
axios.interceptors.request.Eject (resinterceptor);

Walaupun tidak biasa digunakan, anda boleh meletakkan pemintas ke dalam pernyataan bersyarat atau memadamnya berdasarkan peristiwa tertentu.

Mudah -mudahan ini memberi anda pemahaman yang baik tentang bagaimana Axios berfungsi dan bagaimana menggunakannya dalam permohonan anda untuk memastikan permintaan API prinsip kering. Walaupun kami menyentuh permukaan dengan menyenaraikan kes penggunaan biasa dan konfigurasi, Axios mempunyai banyak kelebihan lain yang dapat anda pelajari dalam dokumentasi, termasuk keupayaan untuk membatalkan permintaan dan mencegah pemalsuan permintaan lintas tapak, serta kemungkinan lain yang luar biasa.

Atas ialah kandungan terperinci Tetap kering menggunakan AXIOS untuk permintaan API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!