快捷導(dǎo)航

JavaScript中的HTTP通信專家Axios用法探索

更新時(shí)間：2024年01月08日 08:12:53 作者：慕仲卿

Axios是一個(gè)基于Promise的HTTP客戶端,專為瀏覽器和node.js設(shè)計(jì),本文主要為大家詳細(xì)介紹了Axios的具體使用,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

簡介

Axios是一個(gè)基于Promise的HTTP客戶端，專為瀏覽器和node.js設(shè)計(jì)。它允許發(fā)出各種類型的HTTP請(qǐng)求，并提供豐富的接口處理響應(yīng)。Axios的易用性、擴(kuò)展性和豐富的功能，使其成為處理Web請(qǐng)求的首選工具。

核心特點(diǎn)

瀏覽器中創(chuàng)建XMLHttpRequests
在Node.js中發(fā)出HTTP請(qǐng)求
完全支持Promise API
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
支持取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端XSRF保護(hù)

安裝與配置

npm install axios

或

yarn add axios

基礎(chǔ)配置

const axios = require('axios');

// 基礎(chǔ)配置實(shí)例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

使用實(shí)例

發(fā)送GET請(qǐng)求

獲取數(shù)據(jù)是Axios的常見用途。以下示例展示了如何發(fā)出GET請(qǐng)求：

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

發(fā)送POST請(qǐng)求

向服務(wù)器發(fā)送數(shù)據(jù)通常通過POST請(qǐng)求完成：

axios.post('https://api.example.com/submit', {
  title: 'Axios Tutorial',
  body: 'Axios is easy to use',
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

使用攔截器

攔截器是Axios的一個(gè)強(qiáng)大功能，它允許您在請(qǐng)求或響應(yīng)被處理之前，注入自定義邏輯。

請(qǐng)求攔截器

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(config => {
    config.headers['Authorization'] = 'Bearer your-token-here';
    return config;
}, error => {
    return Promise.reject(error);
});

響應(yīng)攔截器

// 添加響應(yīng)攔截器
axios.interceptors.response.use(response => {
    if (response.status === 200) {
        console.log('Data received successfully');
    }
    return response;
}, error => {
    return Promise.reject(error);
});

高級(jí)用法

并發(fā)請(qǐng)求

Axios支持同時(shí)發(fā)送多個(gè)請(qǐng)求：

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

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

// 同時(shí)執(zhí)行
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 兩個(gè)請(qǐng)求都完成時(shí)
    console.log('Account', acct.data);
    console.log('Permissions', perms.data);
  }));

錯(cuò)誤處理

良好的錯(cuò)誤處理對(duì)于創(chuàng)建健壯的應(yīng)用至關(guān)重要。Axios提供了簡單的錯(cuò)誤處理機(jī)制：

axios.get('/user/12345')
  .catch(error => {
    if (error.response) {
      // 服務(wù)器響應(yīng)狀態(tài)碼不在2xx范圍內(nèi)
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 請(qǐng)求已發(fā)出，但沒有收到響應(yīng)
      console.log(error.request);
    } else {
      // 發(fā)送請(qǐng)求時(shí)出了點(diǎn)問題
      console.log('Error', error.message);
}
});