前言

首先介紹一下什么是axios

Axios 是一個基于?promise?網絡請求庫，作用于node.js?和瀏覽器中。 它是?isomorphic?的(即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生 node.js?http?模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests

官方網站：Axios中文文檔 | Axios中文網

目前官方最新版本1.8.4

---

一、Axios優勢

1.簡單易用

Axios提供了簡潔一致的API，使得發送HTTP請求變得非常容易。無論是GET、POST、PUT還是DELETE等請求，都可以通過簡潔的語法輕松實現

2.支持Promise

Axios基于Promise實現，使得我們可以使用更加現代化的異步編程方式。通過使用Promise，我們可以更好地處理異步請求，避免回調地獄和代碼的混亂。

3.攔截器功能

Axios提供了請求和響應攔截器的功能，可以在請求發送前和響應返回后進行一些額外的處理。這使得我們能夠在請求過程中進行一些自定義的操作，比如添加請求頭、錯誤處理等。

4.瀏覽器和Node.js支持

Axios既可以在瀏覽器環境下運行，也可以在Node.js環境中使用。這使得我們可以在前后端開發中都能輕松使用同一套API，提高開發效率。

5.自動轉換JSON數據

Axios可以自動轉換請求和響應中的JSON數據，使得數據處理更加方便。例如，當我們發送一個POST請求時，Axios會自動將JavaScript對象轉換為JSON字符串。

二、安裝

我這里使用的編譯器是VSCode? 只需要將你的項目文件在集成終端打開輸入安裝指令即可

npm install axios

下載完之后可以在 package.json中查看是否下載成功

三、使用步驟

1.創建文件夾

由于我們這里使用的是二次封裝的寫法。所以需要在src文件夾下創建一個API文件夾

在API文件夾中創建兩個JS文件，一個名為api.js,另一個名為request.js

?

2.創建Axios對象

在api.js文件中編寫以下代碼?

//第一步導入Axios庫
import axios from "axios";
//創建一個Axios對象
const request = axios.create({baseURL:"xxxxxxx",timeout: 5000 
})
export default request

• baseURL:基礎路徑，默認是/ ，這里一般寫的是后端的接口地址。如果是本地json數據的話，這里寫的就是你Vue啟動時候的默認地址。

• timeout:請求超時，這里設置的是5000毫秒

• export default：將request模塊導出

3.封裝請求方法?

在request.js中編寫以下代碼

//引入request模塊
import request from "./api";
export function userlogin(data){return request({url:'xxxxxx',method:'xxxx',data:data})
}

• url:后端方法接口，如果是本地json數據的話，這里寫的就是你json文件的路徑
• method:請求方法。下面列表中是對于各種請求方法的介紹以即描述
• data:向后端發送的數據。如果是GET方法的話，這里的配置項要變成params

序號	方法	描述
1	GET	從服務器獲取資源。用于請求數據而不對數據進行更改。例如，從服務器獲取網頁、圖片等。
2	POST	向服務器發送數據以創建新資源。常用于提交表單數據或上傳文件。發送的數據包含在請求體中。
3	PUT	向服務器發送數據以更新現有資源。如果資源不存在，則創建新的資源。與 POST 不同，PUT 通常是冪等的，即多次執行相同的 PUT 請求不會產生不同的結果。
4	DELETE	從服務器刪除指定的資源。請求中包含要刪除的資源標識符。
5	PATCH	對資源進行部分修改。與 PUT 類似，但 PATCH 只更改部分數據而不是替換整個資源。
6	HEAD	類似于 GET，但服務器只返回響應的頭部，不返回實際數據。用于檢查資源的元數據（例如，檢查資源是否存在，查看響應的頭部信息）。
7	OPTIONS	返回服務器支持的 HTTP 方法。用于檢查服務器支持哪些請求方法，通常用于跨域資源共享（CORS）的預檢請求。
8	TRACE	回顯服務器收到的請求，主要用于診斷。客戶端可以查看請求在服務器中的處理路徑。
9	CONNECT	建立一個到服務器的隧道，通常用于 HTTPS 連接。客戶端可以通過該隧道發送加密的數據。

4.組件使用

在對應Vue組件中引入封裝好的方法

<script setup>
//引入封裝好的方法
import { userlogin } from '@/API/request'
userlogin().then((res) =>{console.log(res.data)})</script>

• res.data:通過接口獲取的數據?

---