快捷導(dǎo)航

axios在Vue3中的使用實(shí)例代碼

更新時(shí)間：2023年07月04日 14:34:06 作者：velpro_!

Axios是一個(gè)基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下

Axios是一個(gè)基于Promise的HTTP客戶端，用于瀏覽器和Node.js。它可以在瀏覽器中發(fā)送異步請求，也可以在Node.js中發(fā)送HTTP請求。Axios可以處理HTTP請求和響應(yīng)，支持?jǐn)r截器、取消請求、自動轉(zhuǎn)換JSON數(shù)據(jù)等功能。在Vue3中，Axios是一個(gè)常用的HTTP請求庫。

1. 安裝：npm install axios

2. 配置基礎(chǔ)實(shí)例

// utils/http.js
import axios from "axios";
// 創(chuàng)建實(shí)例
 const httpInstance = axios.create({
     baseURL:'https://pcapi-xiaotuxian-front-devtest.itheima.net',
     timeout:5000
 })
// 如果項(xiàng)目里需要得到接口基地址不同，可以這樣做
// axios.create()方法可以執(zhí)行多次，每次執(zhí)行就會生成一個(gè)新的實(shí)例
// const httpInstance2 = axios.create({
//     baseURL:'url2',  // 基地址
//     timeout:5000    // 超時(shí)器
// })
//攔截器
httpInstance.interceptors.request.use(config=>{
    return config
},e=>Promise.reject(e))
//響應(yīng)器
httpInstance.interceptors.response.use(res=> res.data,e=>{
    return Promise.reject(e)
})
// 導(dǎo)出
export default httpInstance

3.

// apis/testApi.js
import httpInstance from "@/utils/http";
export function getCatefory(){
    return httpInstance({
        url:'home/category/head'
    })
}

4. 使用

import {getCatefory} from '@/apis/testApi'
getCatefory().then(res=>{
    console.log(res)
})

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

您可能感興趣的文章:

相關(guān)文章

Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
Uniapp打包Android文件選擇上傳問題圖文詳解
在移動應(yīng)用開發(fā)中,文件上傳是一項(xiàng)常見的功能,尤其在社交、云存儲以及各種服務(wù)類應(yīng)用中,這篇文章主要介紹了Uniapp打包Android文件選擇上傳問題的相關(guān)資料,需要的朋友可以參考下
2025-06-06
vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作
這篇文章主要介紹了vue項(xiàng)目中使用rem,在入口文件添加內(nèi)容操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue傳遞參數(shù)不在URL路徑拼接顯示問題
這篇文章主要介紹了Vue傳遞參數(shù)不在URL路徑拼接顯示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
VUE引入使用G2圖表的實(shí)現(xiàn)
本文主要介紹了VUE引入使用G2圖表的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Element el-row el-col 布局組件詳解
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue3+@antv/g2plot 生成詞云圖的效果
詞云圖是一種文本可視化技術(shù),用于展示文本數(shù)據(jù)中關(guān)鍵詞的頻次或重要性,文章介紹了如何在Vue3中使用@antv/g2plot生成詞云圖,并解釋了如何共享顏色和隨機(jī)生成顏色的組件,感興趣的朋友一起看看吧
2024-12-12
vue slots 組件的組合/分發(fā)實(shí)例
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
在日常的前端開發(fā)中,文件上傳是一個(gè)非常常見的需求,尤其是在用戶需要一次性上傳多個(gè)文件的場景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫,為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件,需要的朋友可以參考下
2024-08-08