vue?axios中的get請(qǐng)求方式
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)求-無參數(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無參數(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ì)有問題了

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中安裝使用vue-i18n實(shí)時(shí)切換語言且不用刷新
這篇文章主要介紹了vue3中安裝使用vue-i18n實(shí)時(shí)切換語言不用刷新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
vue3父子通信ref,toRef,toRefs使用實(shí)例詳解
這篇文章主要介紹了vue3父子通信ref,toRef,toRefs使用實(shí)例詳解,分別介紹了ref是什么、toRef是什么及toRefs是什么和最佳使用方式,結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個(gè)總要點(diǎn),對(duì)此有需要的朋友們學(xué)習(xí)下天。2019-02-02
vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue父組件給子組件的組件傳值provide inject的方法
在本篇文章里小編給大家整理的是一篇關(guān)于vue父組件給子組件的組件傳值provide inject的方法,需要的朋友們學(xué)習(xí)下。2019-10-10
Vue中的基礎(chǔ)過渡動(dòng)畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動(dòng)畫原理解析,需要的朋友可以參考下2018-12-12

