axios之post與get請求
axios之post與get請求，如果覺得本片文章對你有幫助期待您的三連，關注公眾號獲取更多資訊
文章目錄
- axios之post與get請求
- 前言
- 一、axios是什么？
- 二、vue.js+axios的get與post請求
- 1.get請求
- 2.post請求
- 總結
前言
提示：這里可以添加本文要記錄的大概內容：
例如：隨著人工智能的不斷發展，機器學習這門技術也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎內容，
提示：以下是本篇文章正文內容，下面案例可供參考
一、axios是什么？
axios 是功能強大的網路請求庫，基于promise的http庫，可以發送get、post請求，也是Vue，React的出現促使axios輕量級庫的出現，
二、vue.js+axios的get與post請求
1.get請求
使用cdn：千萬不要忘記使用axios前加上以下代碼
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios的get用法，有點像固定公式，不過最好理解記憶，這里地址和key之間用？間隔，其次分兩種情況，成功時回呼函式于失敗時回呼函式
axios.get(地址？key=value&key2=values)
.then(function(response){
成功時回呼函式
},function(err){
失敗時回呼函式
})
實體：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<script src=""></script>
</head>
<body>
<!--axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--構建一個get請求的按鈕-->
<intput type="button" value="get請求" class="get">
<script>
<!--點擊get資料-->
document.querySelector(".get").onclick = function (){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
運行如下：點擊get請求按鈕，get資料，控制臺顯示
2.post請求
axios.post(地址,{key:value,key2:value2})此處與get略有不同
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.post(地址,{key:value,key2:value2})
.then(function(response){
成功post回呼函式
},function(err){
失敗回呼函式
})
實體：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<script src=""></script>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<intput type="button" value="post請求" class="post">
<script>
document.querySelector(".post").onclick = function(){
axios.axios.post("https://autumnfish.cn/api/user/reg",
{username:"jack89898kl"})
.then(function(response){
console.log(response);
},function(err){
console.log(err)
}
)
}}
</script>
</body>
</html>
運行結果：這里是上傳注冊用戶名jack89898kl
總結
總而言之，get與post請求的結構是最重要的，
如果覺得本片文章對你有幫助期待您的三連，關注公眾號獲取更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/258759.html
標籤：其他
上一篇：十五、Android檔案存盤
下一篇：【小白做專案-02(仿知乎日報APP)】(聯網,webview,Recyclerview多item,Json決議,重繪加載）手把手教你Android實戰