vue3中封裝axios請求最新實現(xiàn)步驟

更新時間：2024年04月27日 14:25:14 作者：爾嶸

這篇文章主要給大家介紹了關于vue3中封裝axios請求的最新實現(xiàn)步驟,在Vue 3中可以通過封裝axios來實現(xiàn)接口的統(tǒng)一管理和調用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.安裝 Axios：可以通過 npm 或 yarn 安裝 axios 庫。
2.創(chuàng)建一個 axios 實例并設置默認配置項和攔截器，該文件取名叫request.js
3.將 axios 封裝到一個函數(shù)中，api.js
4.在代碼中使用封裝好的 axios 請求
5.結合request.js中四種請求，代替上面3和4標題
總結

在 Vue3 中，可以使用 axios 庫進行網(wǎng)絡請求，并將其封裝到一個自定義的函數(shù)中以便全局使用。具體實現(xiàn)步驟如下：

1.安裝 Axios：可以通過 npm 或 yarn 安裝 axios 庫。

npm install axios
# 或者
yarn add axios

2.創(chuàng)建一個 axios 實例并設置默認配置項和攔截器，該文件取名叫request.js

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// request 攔截器
service.interceptors.request.use(
  config => {
    // 在這里可以設置請求頭、請求參數(shù)等return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    // 在這里處理返回數(shù)據(jù)const { data } = response
    if (data.code !== 200) {
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 封裝具體的請求方法: 四種請求類型不和下面的3和4標題內容放在一起
export const get = (url, params) => {
  return service .get(url, { params });
};

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

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

export const delete= (url, data) => {
  return service .delete(url, data);
};

export default service

在上述代碼中，我們創(chuàng)建了一個名為 service 的 axios 實例，并設置了一些默認的配置項和攔截器。其中，request 攔截器用于請求發(fā)送前對請求做一些處理，例如設置請求頭、請求參數(shù)等；response 攔截器用于對返回數(shù)據(jù)進行處理，例如根據(jù)接口返回的狀態(tài)碼判斷請求是否成功等。

3.將 axios 封裝到一個函數(shù)中，api.js

import service from '@/utils/request'
export function request(config) {
  return service(config)
}

在上述代碼中，我們將 axios 封裝到一個名為 request 的函數(shù)中，并導出該函數(shù)，以便在其他地方可以直接調用。

4.在代碼中使用封裝好的 axios 請求

import { request } from '@/api'
request({
  url: '/user',
  method: 'get'
}).then(response => {
  console.log(response)
})

5.結合request.js中四種請求，代替上面3和4標題

import { get, post,put, delete } from '@/utils/request';

// 發(fā)送GET請求的示例
get('/users', { id: 1 })
  .then((response) => {
    // 處理響應數(shù)據(jù)
    console.log(response);
  })
  .catch((error) => {
    // 處理請求錯誤
    console.error(error);
  });

// 發(fā)送POST請求的示例
post('/users', { name: 'John', age: 25 })
  .then((response) => {
    // 處理響應數(shù)據(jù)
    console.log(response);
  })
  .catch((error) => {
    // 處理請求錯誤
    console.error(error);
  });

在上述代碼中，我們引入封裝好的 request 函數(shù)，并通過傳遞一個包含請求參數(shù)的配置對象來發(fā)起網(wǎng)絡請求。