Axios 前后端交互工具学习

Axios 前后端交互工具学习

引言

  Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中进行渲染，页面局部更新技术Ajax.

引入Axios

cdn的方式引入

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

介绍

axios有get（）、delete（）、put（）、post（）,这个几个方法

GET请求的方式

<script>
 // axios发送一个异步请求之 GET请求
         axios.get("http://localhost:9090/get?id=1")
             .then(// 代表请求成功之后的一个正确处理
                 function (response) {
   
   // 返回的response是一个对象
                     console.log(response.data);})
             .catch(// 请求失败的一个处理
                 function (err) {
   
   
                     console.log(err);
                 }
         )
</script>

get里面的参数就是一个url，传递参数的时候直接拼接到url中

then方法

  这个就相当于回调函数，在ajax中 有一个success:function(data){},可以进行回调，而这里通过 then进行对请求返回的响应数据进行一个处理，内部是一个函数，函数中的参数是返回的响应（包含响应头、响应数据、相应格式等，通过 response.data 能拿到返回数据）

catch方法

这个就像与异常返回的函数，在ajax中有一个 error:function(){},，返回的服务器异常错误的响应数据

POST请求的方式

        // axios发送各种方式的异步请求,post方法的第一个参数是 url，第二个参数是 在body中的 json对象
       // 第二个参数自动转化成json数据，后端可以直接接收
        axios.