Axios Notları ve İpuçları

Axios, JavaScript'te asenkron HTTP istekleri yapmak için kullanılan popüler, promise-tabanlı bir HTTP istemcisidir. Bu Notları ve İpuçları, sık kullanılan Axios fonksiyonlarına ve özelliklerine örneklerle genel bir bakış sunar.

İçindekiler

1. Kurulum
2. İstek Yapma
3. İstek Yapılandırması
4. Yanıt Şeması
5. Varsayılan Yapılandırma
6. Interceptor'lar
7. Hata Yönetimi
8. İptal Etme
9. Eşzamanlı İstekler

Kurulum

npm install axios

İstek Yapma

GET İsteği

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST İsteği

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

Birden Fazla Eşzamanlı İstek

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

İstek Yapılandırması

// POST isteği gönderme
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// Uzak bir görüntü için GET isteği
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

Yanıt Şeması

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

Varsayılan Yapılandırma

Global axios varsayılanları

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';

Özel örnek varsayılanları

// Örnek oluştururken varsayılan yapılandırmayı ayarlama
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Örnek oluşturulduktan sonra varsayılanları değiştirme
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Interceptor'lar

// İstek interceptor'ı ekleme
axios.interceptors.request.use(function (config) {
    // İstek gönderilmeden önce bir şeyler yap
    return config;
  }, function (error) {
    // İstek hatası ile bir şeyler yap
    return Promise.reject(error);
  });

// Yanıt interceptor'ı ekleme
axios.interceptors.response.use(function (response) {
    // 2xx aralığındaki durum kodları bu fonksiyonun tetiklenmesine neden olur
    // Yanıt verisi ile bir şeyler yap
    return response;
  }, function (error) {
    // 2xx aralığı dışındaki durum kodları bu fonksiyonun tetiklenmesine neden olur
    // Yanıt hatası ile bir şeyler yap
    return Promise.reject(error);
  });

Hata Yönetimi

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // İstek yapıldı ve sunucu 2xx aralığı dışında bir durum koduyla yanıt verdi
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // İstek yapıldı ancak hiçbir yanıt alınmadı
      console.log(error.request);
    } else {
      // İsteği ayarlarken bir şeyler ters gitti ve bir Hata tetiklendi
      console.log('Hata', error.message);
    }
    console.log(error.config);
  });

İptal Etme

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('İstek iptal edildi', thrown.message);
  } else {
    // hatayı işle
  }
});

// isteği iptal et (message parametresi isteğe bağlıdır)
source.cancel('İşlem kullanıcı tarafından iptal edildi.');

Eşzamanlı İstekler

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Her iki istek de artık tamamlandı
  }));