iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue axios中的get请求方式
  • 911
分享到

vue axios中的get请求方式

2024-04-02 19:04:59 911人浏览 独家记忆
摘要

目录Vue axiOS中的get请求一、安装二、使用常见错误vue axios post请求参数错误400vue axios中的get请求 一、安装 使用 npm:npm insta

vue axios中的get请求

一、安装

使用 npm:npm install axios

二、使用

步骤:1.引入 2.发送请求

<template>
  <div>
    <!-- 2.点击发送请求 -->
    <button @click="getdata">get请求-无参数</button
    ><button @click="getDataByParams">get请求-有参数</button>
  </div>
</template>
<script>
//1.引入axios
import axios from "axios";
export default {
  methods: {
    // 3.发送axios无参数请求
    getdata() {
      axios
        // 3.1url地址
        .get("Http://157.122.54.189:9095/scenics/banners")
        // 3.2成功时回调函数
        .then((data) => {
          console.log(data);
        })
        //3.3失败时回调函数
        .catch((err) => {
          console.log(err);
        });
    },
    // 有参数
    getDataByParams() {
      axios
        //params:可传递多个参数,固定写法,不能改,否则参数传递失败
        .get("http://157.122.54.189:9095/posts", { params: { id: 4 } })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style>
</style>

常见错误

url后面不要写冒号,否则会结束。 

vue axios post请求参数错误400

如果直接把loginMode1当请求参数传,后端是接收不到的

要对loginMode1处理成字符串然后再转换,如下

然后再axios处理

这样就不会有问题了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue axios中的get请求方式

本文链接: https://www.lsjlt.com/news/153267.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作