axios 的請求方式
阿新 • • 發佈：2022-11-30
1.繫結點選事件 get請求無引數
</head> <body> <h2>get請求+引數換地</h2> <button class="btn1">測試</button> <button class="btn2">測試有引數</button> <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> --> <script src="./lib/axios.js"></script> <script> //// 2.繫結點選事件 get請求有引數1.繫結點選事件 get請求無引數 const btn = document.querySelector(".btn1"); btn.addEventListener("click", function () { // 請求方式1 // axios({ // method: "get", // url: "http://ajax-api.itheima.net/api/news", // }) // 請求方2 axios.get("http://ajax-api.itheima.net/api/news")axios .get("http://ajax-api.itheima.net/api/news") .then(function (res) { console.log("返回介面成功時的結果"); }) .catch(function (err) { console.log("返回介面失敗時的結果"); console.log(); }); }); </script> </body>
</head>
<body>
<h2>get請求+引數換地</h2>
<button class="btn1">測試</button>
<button class="btn2">測試有引數</button>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<script src="./lib/axios.js"></script>
<script>
2.繫結點選事件 get請求有引數
const btn2 = document.querySelector(".btn2");
btn2.addEventListener("click", function () {
// 請求攜帶引數的方法1URL地址後面直接拼接？屬性名=屬性值
// axios.get("http://ajax-api.itheima.net/api/robot?spoken=你是誰")
//引數寫在“”號裡面 多個引數用&隔開
如axios.get("http://ajax-api.itheima.net/api/robot?屬性名=屬性值&屬性名1=屬性名2")
// 請求攜帶引數的方法2
如axios .get("http://ajax-api.itheima.net/api/robot",
{params: { spoken（屬性名）: "你喜歡誰？（屬性值）", },})
多個引數，號隔開寫在params:{寫這}裡面
axios
.get("http://ajax-api.itheima.net/api/robot", {
params: {
spoken: "你喜歡誰？",
},
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log("出錯");
});
});
</script>
</body>