vue axios中的get請求方式

Posted on by

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處理

這樣就不會有問題瞭

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：