前言

首先介紹一下什么是axios

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

官方網(wǎng)站：Axios中文文檔 | Axios中文網(wǎng)

目前官方最新版本1.8.4

一、Axios優(yōu)勢

1.簡單易用

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

2.支持Promise

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

3.攔截器功能

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

4.瀏覽器和Node.js支持

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

5.自動轉(zhuǎn)換JSON數(shù)據(jù)

Axios可以自動轉(zhuǎn)換請求和響應(yīng)中的JSON數(shù)據(jù)，使得數(shù)據(jù)處理更加方便。例如，當(dāng)我們發(fā)送一個(gè)POST請求時(shí)，Axios會自動將JavaScript對象轉(zhuǎn)換為JSON字符串。

二、安裝

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

npm install axios

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

三、使用步驟

1.創(chuàng)建文件夾

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

在API文件夾中創(chuàng)建兩個(gè)JS文件，一個(gè)名為api.js,另一個(gè)名為request.js

2.創(chuàng)建Axios對象

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

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

• baseURL:基礎(chǔ)路徑，默認(rèn)是/ ，這里一般寫的是后端的接口地址。如果是本地json數(shù)據(jù)的話，這里寫的就是你Vue啟動時(shí)候的默認(rèn)地址。
• timeout:請求超時(shí)，這里設(shè)置的是5000毫秒
• export default：將request模塊導(dǎo)出

3.封裝請求方法 

在request.js中編寫以下代碼

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

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

4.組件使用

在對應(yīng)Vue組件中引入封裝好的方法

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

res.data:通過接口獲取的數(shù)據(jù) 

到此這篇關(guān)于Vue3中Axios的使用-附完整代碼的文章就介紹到這了,更多相關(guān)vue axios使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！