首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue的get请求

vue axios中的get请求方式

2022-07-02 10:27:44 作者：山竹回家了

这篇文章主要介绍了vue axios中的get请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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>