Analisis mendalam tentang proses dan prinsip permintaan tak segerak dalam aksios

1. Apakah axios?

axios ialah kaedah berasaskan Janji yang boleh menghantar permintaan get, pos dan lain-lain, serta boleh digunakan oleh kedua-dua bahagian hadapan dan belakang. [Disyorkan: Tutorial video Ajax, bahagian hadapan web]

2 Prinsip dalaman axios

• aksios. perpustakaan terdedah kepada dunia luar Satu tika axios dipasang, dan kaedah Axios dipasang dalam tika aksios Kaedah Axios mempunyai interceptors对象 (pemintas), interceptors对象 mempunyai request对象 dan response对象, dan kedua-duanya. request对象 dan response对象 mempunyai kaedah penggunaan, jadi kita boleh memanggil axios.interceptors.request.use() dan axios.interceptors.response.use().

• interceptors对象 dalam request对象 dan response对象Malah, ia adalah tatasusunan (pengendali) yang digunakan untuk menguruskan pemintas. Apabila kita memanggil axios.interceptors.request.use(), panggilan balik kejayaan dan panggilan balik kegagalan akan ditolak dalam tatasusunan pemintas permintaan (pengendali). Setiap kali ia digunakan, ia ditolak sekali, serupa dengan [res1, rej1, res2, rej2...]

• Seterusnya ialah rantai, ia adalah tatasusunan yang menyimpan semua panggilan balik, Kerana ia digunakan untuk Promise, ia perlu menggunakan dua nilai , nilai awal adalah dispatchRequest dan undefiend. Seterusnya, Promise.resolve(config).then(fn1, fn2). Apabila keputusan dalam konfigurasi dipenuhi (berjaya), konfigurasi dalam konfigurasi diserahkan kepada fn1 dan dilaksanakan. Jika ia ditolak (laporan ralat), hasil ralat dihantar ke fn2 dan dilaksanakan iaitu, Promise.resolve(config).then(chain[0], chain[1]). chain[0] ialah panggilan balik yang berjaya, chain[1] ialah panggilan balik kegagalan. Terdapat banyak item konfigurasi dalam konfigurasi, ia mungkin nilai rentetan atau kaedah, dsb.

• Langkah seterusnya ialah menyelesaikan semua Promises, nyahshift fungsi panggil balik dalam request数组 ke hadapan chain数组 dan tolak fungsi panggil balik dalam response数组 ke chain数组 bahagian paling belakang. Akhirnya chain数组 serupa dengan [res2, rej2, res1, rej1, dispatchRequest, undefiend, res3, rej3, res4, rej4].

• dispatchRequest digunakan untuk melaksanakan axios.request Terdapat dispatchRequest方法 dalam adapter, yang akan memanggil objek yang berbeza mengikut persekitaran yang berbeza. Jika dalam persekitaran penyemak imbas, panggil XMLHttpRequest对象. Jika ia adalah persekitaran nodejs, panggil http对象. Itulah sebabnya ia boleh digunakan pada kedua-dua bahagian hadapan dan bahagian belakang. adapter akan menghuraikan dan merangkum data yang diminta, dan objek yang dikapsulkan ialah apa yang boleh kita lihat response响应对象.

• Selepas memproses dispatchRequest, fungsi panggil balik interceptors.response akan dilaksanakan. Inilah sebabnya mengapa perintah pelaksanaan yang kita lihat ialah interceptors.request yang terakhir dilaksanakan sebelum interceptors.requets yang pertama, kemudian axios.request dilaksanakan, dan akhirnya interceptors.response.

• Seterusnya laksanakan logik perniagaan kami.

3. Penggunaan axios

1 Dengan menggunakan axios

Kaedah biasa: dapatkan, hantar, minta

axios.get

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios.post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.request

Anda boleh lulus dalam banyak konfigurasi permintaan

axios.request({
	url: '/user',
	method: 'get', // 默认
	baseURL: '/api',
	//...})

2. Lulus dalam kaedah konfigurasi

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

4. Modul respons

Modul respons Di sana ialah parameter berikut

{
	data: {},
	status: 200,
	statusText: 'ok'，
	header: {},
	config: {},
	request: {}}

5. Konfigurasi

1 Konfigurasi aksios global

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2 🎜>

const instance = axios.create({
  baseURL: 'https://api.example.com'});
 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3 Keutamaan konfigurasi

const instance = axios.create();instance.defaults.timeout = 2500;instance.get('/longRequest', {
  timeout: 5000});

Tetapan tamat masa terakhir ialah 5000, jadi keutamaan di sini, Konfigurasi dalam permintaan > Konfigurasi segera > Konfigurasi lalai axios

6. Pemintas Pemintas

boleh memproses data sebelum meminta data atau sebelum menerima data

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

7 Pemprosesan permintaan serentak

// 把axios请求放进函数里function getUserAccount() {
  return axios.get('/user/12345');}
 function getUserPermissions() {
  return axios.get('/user/12345/permissions');}//函数执行放到Promise里面排队，挨个响应。Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

Dokumentasi rujukan: https://www.npmjs.com/package/axios

Atas ialah kandungan terperinci Analisis mendalam tentang proses dan prinsip permintaan tak segerak dalam aksios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!