axios学习--起步

2020年5月8日 418次阅读 来源: CrazyLL

官网：http://www.axios-js.com/zh-cn/docs/

什么是 axios？

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

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

安装

　　使用 npm:

$ npm install axios

　　使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 

 

demo:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
        <p id="p"></p>
    <script>
//get
        axios.get("/test")
             .then(function (value) {
                alert(value.data);
             });
//post
        axios.post("/pp")
            .then(function (value) {
                document.getElementById("p").innerText=JSON.stringify(value.data);
            })
            .catch(function (reason) {
                alert(reason.data);
            });
　//axios API
　　　　　　axios({
　　　　　　   method:'post',
　　　　　　   url:'/pp',
　　　　　　   data:{
    　　　　   p1:"ass"
  　　　　 }
　　　　}).then(function (value) {
 　　　　   alert(value.data+"--");
　　　　})
</script> </body> </html>

Controller:

@Controller
public class TestController {

    @RequestMapping(value = "/t")
    public String test1(){
        return "a";
    }
    @GetMapping(value = "/test")
    @ResponseBody
    public String test2(){
        return "asdasdsad";
    }
    @PostMapping(value = "/pp")
    @ResponseBody
    public String pp(){
        return "pp";
    }
}

访问：http://localhost:8080/t

 

《axios学习--起步》

 

    原文作者：CrazyLL
    原文地址: https://www.cnblogs.com/crazy-lc/p/12845655.html
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞