前言

首先介紹一下什么是axios

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

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

目前官方最新版本1.8.4

一、Axios優(yōu)勢(shì)

1.簡(jiǎn)單易用

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

2.支持Promise

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

3.攔截器功能

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

4.瀏覽器和Node.js支持

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

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

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

二、安裝

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

npm install axios

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

三、使用步驟

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

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

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

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

在api.js文件中編寫(xiě)以下代碼 

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

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

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

在request.js中編寫(xiě)以下代碼

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

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

4.組件使用

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

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

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

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

最新評(píng)論