前端學(xué)習(xí)11 axios二次封裝

1. axios概念

axios是一個基于Promise的HTTP客戶端，可以用于瀏覽器和Node.js環(huán)境。axios支持所有現(xiàn)代瀏覽器和Node.js，可以用于發(fā)送GET、POST、PUT、DELETE等HTTP請求，并且支持請求和相應(yīng)攔截、自動轉(zhuǎn)換數(shù)據(jù)格式等功能。

2. Axios的核心

1.Promise 基礎(chǔ)：

Axios 基于 Promise，這意味著所有的請求都是異步的，并且可以使用 .then 和 .catch 方法來處理成功和失敗的情況。

2.請求配置：

每次發(fā)送請求時，可以傳遞一個配置對象，包含 URL、方法、請求頭、請求體等信息。

3.攔截器：

Axios 支持請求和響應(yīng)攔截器，可以在請求發(fā)送前或響應(yīng)接收后進行一些預(yù)處理或后處理操作。

4.錯誤處理：

Axios 提供了統(tǒng)一的錯誤處理機制，可以通過 .catch 方法捕獲請求過程中發(fā)生的任何錯誤。

5.取消請求：

Axios 支持取消請求，可以在請求發(fā)送后隨時取消。

6.并發(fā)請求：

Axios 提供了 axios.all 和 axios.spread 方法，可以同時發(fā)送多個請求，并在所有請求完成后處理結(jié)果。

3. Axios的基本使用

Axios常用的幾種請求方法：get，post，put，patch，delete

get：一般用于獲取數(shù)據(jù)

post：一般用于提交數(shù)據(jù)（表單提交與文件上傳）

patch：更新數(shù)據(jù)（只將修改的數(shù)據(jù)推送到后端（服務(wù)端））

put：更新數(shù)據(jù)（所有數(shù)據(jù)推送到服務(wù)端）

delete：刪除數(shù)據(jù)

//引入 axios
import axios from 'axios'

//默認是get 請求
axios({
  //需要請求的URL地址
  url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  //輸出請求成功的數(shù)據(jù)
  console.log(res);
})

axios({
  url:'http://123.207.32.32:8000/home/data',
  // 專門針對get請求的參數(shù)拼接
  prams:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res);
})

4. axios 二次封裝

二次封裝的必要性：

代碼復(fù)用

在多個地方重復(fù)編寫同樣的請求代碼，不僅繁瑣且容易出錯。通過二次封裝，我們可以將相同的請求邏輯抽象出來，形成統(tǒng)一的API接口，方便各個組件調(diào)用。

統(tǒng)一處理請求和響應(yīng)

在數(shù)據(jù)請求時，我們通常需要處理請求的頭、參數(shù)、響應(yīng)的格式等。通過二次封裝，可以將這些邏輯集中處理，避免每次請求都寫冗余的代碼。

異常處理

在實際應(yīng)用中，網(wǎng)絡(luò)請求常常會因多種原因失敗。通過封裝，可以在一個地方統(tǒng)一處理錯誤，方便管理和維護。

拓展功能

對于一些特定項目需求，比如添加請求攔截器、響應(yīng)攔截器，或者實現(xiàn)請求的重試機制，二次封裝提供了靈活的方式來實現(xiàn)這一功能。

4.1 創(chuàng)建Axio實例

首先，創(chuàng)建一個Axios實例，以便于配置和管理。

// axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: ' // API基礎(chǔ)路徑
    timeout: 10000, // 請求超時時間
    headers: {
        'Content-Type': 'application/json',
    },
});

// 請求攔截器
axiosInstance.interceptors.request.use(
    config => {
        // 可以在發(fā)送請求之前做一些處理，如添加token
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        // 處理請求錯誤
        return Promise.reject(error);
    }
);

// 響應(yīng)攔截器
axiosInstance.interceptors.response.use(
    response => {
        // 可以對響應(yīng)數(shù)據(jù)進行處理
        return response.data;
    },
    error => {
        // 處理響應(yīng)錯誤
        console.error(error);
        return Promise.reject(error);
    }
);

export default axiosInstance;

4.2 封裝請求方法

接下來，我們可以將常用的請求方法進行封裝，以便于在各個組件中調(diào)用

// apiService.js
import axiosInstance from './axiosInstance';

export const getData = (url, params) => {
    return axiosInstance.get(url, { params });
};

export const postData = (url, data) => {
    return axiosInstance.post(url, data);
};

export const putData = (url, data) => {
    return axiosInstance.put(url, data);
};

export const deleteData = (url) => {
    return axiosInstance.delete(url);
};

4.3 使用Axios封裝的好處

通過上述代碼，我們在項目中可以簡化請求的調(diào)用，并且能夠方便地處理請求和響應(yīng)。

// 示例使用
import { getData, postData } from './apiService';

getData('/users', { id: 1 })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('獲取用戶數(shù)據(jù)失敗:', error);
    });

postData('/users', { name: 'Jack', age: 30 })
    .then(data => {
        console.log('用戶創(chuàng)建成功:', data);
    })
    .catch(error => {
        console.error('創(chuàng)建用戶失敗:', error);
    });

#前端學(xué)習(xí)#