您的位置：首页 > 移动开发 > IOS开发

axios简单应用

2020-03-28 18:58 1056 查看

axios简单应用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

初始化HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="avaos">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios使用</title>

<style>
#app {
width: 400px;
margin: 100px auto;
text-align: center;
}

button:hover {
cursor: pointer;
}
</style>

</head>
<body>
<div id="app">
<button onclick="testGet()">Get请求</button>
<button onclick="testPost()">Post请求</button>
<button onclick="testPut()">Put请求</button>
<button onclick="testDelete()">Delete请求</button>
</div>
</body>
</html>

引入axios

<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

Get 请求

function testGet(){
console.log("get");

axios.get('http://localhost:3000/posts')
.then(response=>{
console.log("/posts", response.data);
}
);
}

Post 请求

function testPost(){
console.log("post");

axios.post('http://localhost:3000/posts',  {"title": "json-server2", "author": "typicode2" })
.then(response=>{
console.log("/posts", response.data);
}
);
}

Put 请求

function testPut(){
console.log("put");

axios.put('http://localhost:3000/posts/2',  {"title": "json-server2...", "author": "typicode2.." })
.then(response=>{
console.log("/posts", response.data);
}
);
}

Delete 请求

function testDelete(){
console.log("delete");

axios.delete('http://localhost:3000/posts/2')
.then(response=>{
console.log("/posts", response.data);
}
);
}

参考资料

  • 点赞
  • 收藏
  • 分享
  • 文章举报
avaos 发布了43 篇原创文章 · 获赞 1 · 访问量 646 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航