快捷導(dǎo)航

在Vue項(xiàng)目中封裝axios的最新方法

更新時(shí)間：2025年02月21日 10:43:34 作者：全棧若城

這篇文章介紹了axios的基本使用和封裝方法,包括設(shè)置接口請(qǐng)求前綴、請(qǐng)求頭和超時(shí)時(shí)間、封裝請(qǐng)求方法、添加請(qǐng)求和響應(yīng)攔截器,封裝axios可以提高代碼質(zhì)量和可維護(hù)性,需要的朋友可以參考下

一、axios簡(jiǎn)介

axios 是一個(gè)基于 XMLHttpRequest 的輕量級(jí)HTTP客戶端，適用于瀏覽器和Node.js環(huán)境。它提供以下特性：

創(chuàng)建XMLHttpRequests和HTTP請(qǐng)求
支持 Promise API
請(qǐng)求和響應(yīng)攔截
數(shù)據(jù)轉(zhuǎn)換
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端XSRF防御
Vue 2.0起，官方推薦使用 axios 替代 vue-resource。

基本使用

安裝 axios：

npm install axios --S

或通過CDN引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在項(xiàng)目中導(dǎo)入并使用：

import axios from 'axios';
axios({
  url: 'xxx',
  method: 'GET',
  params: {
    type: '',
    page: 1
  }
}).then(res => {
  console.log(res);
});

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (res1, res2) {
    // 處理響應(yīng)
  }));

二、封裝axios的原因

雖然 axios 的API設(shè)計(jì)友好，但隨著項(xiàng)目規(guī)模增長(zhǎng)，直接使用 axios 可能會(huì)導(dǎo)致以下問題：

重復(fù)編寫配置代碼，如超時(shí)時(shí)間、請(qǐng)求頭等。
難以維護(hù)的冗余代碼。
缺乏統(tǒng)一的錯(cuò)誤處理。
因此，封裝 axios 可以提高代碼質(zhì)量和可維護(hù)性。

三、封裝axios的方法

1. 設(shè)置接口請(qǐng)求前綴

根據(jù)不同環(huán)境（開發(fā)、測(cè)試、生產(chǎn)）設(shè)置不同的請(qǐng)求前綴：

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com';
}

在 vue.config.js 中配置代理轉(zhuǎn)發(fā)以實(shí)現(xiàn)跨域：

devServer: {
  proxy: {
    '/proxyApi': {
      target: 'http://dev.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/proxyApi': ''
      }
    }
  }
}

2. 設(shè)置請(qǐng)求頭和超時(shí)時(shí)間

創(chuàng)建 axios 實(shí)例時(shí)，配置通用請(qǐng)求頭和超時(shí)時(shí)間：

const service = axios.create({
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});

3. 封裝請(qǐng)求方法

封裝 GET 和 POST 請(qǐng)求方法，便于統(tǒng)一管理和使用：

export function httpGet({ url, params = {} }) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}
export function httpPost({ url, data = {}, params = {} }) {
  return new Promise((resolve, reject) => {
    axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}

將封裝的方法放在 api.js 文件中，便于統(tǒng)一管理：

import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });

在頁(yè)面中直接調(diào)用：

import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {
  console.log(res);
});

4. 添加請(qǐng)求攔截器

在請(qǐng)求攔截器中添加通用邏輯，如設(shè)置token：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  token && (config.headers.Authorization = token);
  return config;
}, error => Promise.reject(error));

5. 添加響應(yīng)攔截器

在響應(yīng)攔截器中處理通用錯(cuò)誤和業(yè)務(wù)邏輯：

axios.interceptors.response.use(response => {
  if (response.status === 200) {
    // 根據(jù)狀態(tài)碼處理業(yè)務(wù)邏輯
    return Promise.resolve(response.data);
  } else {
    return Promise.reject(response);
  }
}, error => {
  // 處理錯(cuò)誤
  return Promise.reject(error);
});