vue怎么封裝Axios的get、post請求

Vue怎么封裝Axios的get、post請求

在現代的前端開發中，Axios是一個非常流行的HTTP客戶端庫，用于發送異步請求。在Vue項目中，我們通常需要對Axios進行封裝，以便更好地管理API請求、統一處理錯誤、添加攔截器等。本文將介紹如何在Vue項目中封裝Axios的get和post請求。

1. 安裝Axios

首先，我們需要在Vue項目中安裝Axios。如果你還沒有安裝Axios，可以通過以下命令進行安裝：

npm install axios

或者使用yarn：

yarn add axios

2. 創建Axios實例

為了更好地管理Axios請求，我們可以創建一個Axios實例，并在實例上配置一些默認選項，比如基礎URL、超時時間、請求頭等。

// src/utils/request.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 你的API基礎URL
  timeout: 10000, // 請求超時時間
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

3. 封裝get請求

接下來，我們可以封裝一個get請求方法。這個方法將接收請求的URL和參數，并返回一個Promise對象。

// src/utils/request.js
export const get = (url, params) => {
  return instance.get(url, { params })
    .then(response => {
      return response.data;
    })
    .catch(error => {
      throw error;
    });
};

在這個封裝中，我們使用了instance.get方法來發送GET請求，并將請求參數傳遞給params。如果請求成功，我們返回response.data；如果請求失敗，我們拋出錯誤。

4. 封裝post請求

類似地，我們可以封裝一個post請求方法。這個方法將接收請求的URL和數據，并返回一個Promise對象。

// src/utils/request.js
export const post = (url, data) => {
  return instance.post(url, data)
    .then(response => {
      return response.data;
    })
    .catch(error => {
      throw error;
    });
};

在這個封裝中，我們使用了instance.post方法來發送POST請求，并將請求數據傳遞給data。如果請求成功，我們返回response.data；如果請求失敗，我們拋出錯誤。

5. 使用封裝的請求方法

現在，我們可以在Vue組件中使用封裝的get和post請求方法了。

// src/components/ExampleComponent.vue
import { get, post } from '@/utils/request';

export default {
  methods: {
    fetchData() {
      get('/api/data', { id: 1 })
        .then(data => {
          console.log('Data fetched:', data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    submitData() {
      post('/api/submit', { name: 'John', age: 30 })
        .then(response => {
          console.log('Data submitted:', response);
        })
        .catch(error => {
          console.error('Error submitting data:', error);
        });
    },
  },
};

在這個例子中，我們分別調用了get和post方法來獲取數據和提交數據。如果請求成功，我們會在控制臺中打印出返回的數據；如果請求失敗，我們會打印出錯誤信息。

6. 添加請求攔截器和響應攔截器

為了進一步優化我們的請求處理，我們可以添加請求攔截器和響應攔截器。請求攔截器可以在請求發送之前對請求進行一些處理，比如添加認證信息；響應攔截器可以在響應返回之后對響應進行一些處理，比如統一處理錯誤。

// src/utils/request.js
instance.interceptors.request.use(
  config => {
    // 在請求發送之前做一些處理
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  response => {
    // 對響應數據做一些處理
    return response;
  },
  error => {
    // 對響應錯誤做一些處理
    if (error.response.status === 401) {
      // 處理未授權錯誤
      console.error('Unauthorized, please login again.');
    }
    return Promise.reject(error);
  }
);

在這個例子中，我們在請求攔截器中添加了認證信息，并在響應攔截器中處理了未授權錯誤。

7. 總結

通過封裝Axios的get和post請求，我們可以更好地管理API請求，統一處理錯誤，并添加攔截器來優化請求和響應的處理。這種封裝方式不僅提高了代碼的可維護性，還使得我們在開發過程中能夠更加專注于業務邏輯的實現。

希望本文對你有所幫助，祝你在Vue項目中愉快地使用Axios！