首页 > > 程序设计 > Java技术 >

axios学习--起步

2020-05-07 16:07:53来源：博客园阅读 ()

axios学习--起步

官网：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";
    }
}