vue?axios中的get請(qǐng)求方式

更新時(shí)間：2022年07月02日 10:37:57 作者：山竹回家了

這篇文章主要介紹了vue?axios中的get請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue axios中的get請(qǐng)求

一、安裝

使用 npm:npm install axios

二、使用

步驟：1.引入 2.發(fā)送請(qǐng)求

<template>
? <div>
? ? <!-- 2.點(diǎn)擊發(fā)送請(qǐng)求 -->
? ? <button @click="getdata">get請(qǐng)求-無(wú)參數(shù)</button
? ? ><button @click="getDataByParams">get請(qǐng)求-有參數(shù)</button>
? </div>
</template>

<script>
//1.引入axios
import axios from "axios";
export default {
? methods: {
? ? // 3.發(fā)送axios無(wú)參數(shù)請(qǐng)求
? ? getdata() {
? ? ? axios
? ? ? ? // 3.1url地址
? ? ? ? .get("http://157.122.54.189:9095/scenics/banners")
? ? ? ? // 3.2成功時(shí)回調(diào)函數(shù)
? ? ? ? .then((data) => {
? ? ? ? ? console.log(data);
? ? ? ? })
? ? ? ? //3.3失敗時(shí)回調(diào)函數(shù)
? ? ? ? .catch((err) => {
? ? ? ? ? console.log(err);
? ? ? ? });
? ? },
? ? // 有參數(shù)
? ? getDataByParams() {
? ? ? axios
? ? ? ? //params:可傳遞多個(gè)參數(shù),固定寫法,不能改,否則參數(shù)傳遞失敗
? ? ? ? .get("http://157.122.54.189:9095/posts", { params: { id: 4 } })
? ? ? ? .then((data) => {
? ? ? ? ? console.log(data);
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? console.log(err);
? ? ? ? });
? ? },
? },
};
</script>

<style>
</style>

常見錯(cuò)誤

url后面不要寫冒號(hào)，否則會(huì)結(jié)束。

vue axios post請(qǐng)求參數(shù)錯(cuò)誤400

如果直接把loginMode1當(dāng)請(qǐng)求參數(shù)傳,后端是接收不到的

要對(duì)loginMode1處理成字符串然后再轉(zhuǎn)換,如下

然后再axios處理

這樣就不會(huì)有問(wèn)題了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue使用swiper問(wèn)題(5.2.0版本,避免踩坑)
這篇文章主要介紹了Vue使用swiper問(wèn)題(5.2.0版本,避免踩坑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
淺析Vue2/Vue3中響應(yīng)式的原理
這篇文章主要是來(lái)和大家一起討論一下Vue2與Vue3中響應(yīng)式的原理，文中的相關(guān)示例代碼簡(jiǎn)潔易懂，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考下
2023-07-07
vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
Element PageHeader頁(yè)頭的使用方法
這篇文章主要介紹了Element PageHeader頁(yè)頭的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
Vue登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)的實(shí)踐分享
這篇文章講給大家詳細(xì)介紹一下Vue如何實(shí)現(xiàn)登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)，文章通過(guò)代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的的幫助,需要的朋友可以參考下
2023-07-07
Vue實(shí)現(xiàn)版本檢測(cè)與升級(jí)提示
在現(xiàn)代Web應(yīng)用開發(fā)中,版本檢測(cè)與升級(jí)提示是提升用戶體驗(yàn)的重要環(huán)節(jié),本文將詳細(xì)介紹如何在Vue應(yīng)用中實(shí)現(xiàn)這一功能,有需要的小伙伴可以參考一下
2025-04-04
vue-router 路由傳參問(wèn)題(路由傳參方式)
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
vue+flask實(shí)現(xiàn)視頻合成功能(拖拽上傳)
這篇文章主要介紹了vue+flask實(shí)現(xiàn)視頻合成功能(拖拽上傳),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法
這篇文章主要介紹了vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue組件的寫法匯總
組件化是為了方便代碼復(fù)用，提高開發(fā)效率。今天腳本之家小編給大家分享常見的vue組件寫法四種，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-04-04