Axios

Posted 2020-12-12 平凡人的普通修仙之路

Axios

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

何时：

        主要用于创建请求

         在浏览器中，创建xhr请求，在node.js中，创建普通http请求

为什么：

         浏览器中创建xhr请求，4种方案：

         ①使用原生XXHR对象----麻烦

         ②使用jQuery的封装函数----大材小用(jQuery中岂止ajax，还包含大量DOM/动画等操作,

而Vue只使用ajax，别的都不用。)

         ③使用官方提供的VueResource插件----官方废弃

         ④使用第三方工具Aaxios----本身与Vue没有任何关系

Vue.js生态系统(Ecosystem):Vue.js、Axios、Vue-Router、Vuex、MintUI、ElementUI、Weex

如何：

       1. ①在html页面中引入JS文件

           <script src="js/axios.min.js"></script>

           ②在全局添加axios对象,包含发送http请求的api

       2.调用axios，发起异步请求

Get请求： 

       ①axios.get("url",{ 

                    params:{ 

                         //get方式下，随url发送的参数

                    }

           }).then(res=>{  ...  })

       ②服务器端跨域CORS：

不能用res.send(...)

 只能res.writeHeader(200,{"Access-Control-Aallow-Origin":"" });

res.write(JSON.stringify(result));

res.end();

Post请求：

        ①axios.post("url","变量=值&变量=值&...").then()

          坑!!!get和post方法传参时，配置属性名不一样：

           Get请求传参,用的是params:{  }对象

           Post请求传参,必须用字符串

        ②解决:引入qs模块  <script src="js/qs.min.js"></script>

                   使用axios.post("url",Qs.stringify({参数:值,参数:值,...})).then()

                   结果:stringify会将对象转化为queryString语法

          坑！！！:获得响应主体的数据,数据不是直接返回，而是包裹在一个对象的data属性中返回

          无论时get还是post方式请求,获得响应数据都是一个全新的对象，传统的响应数据，包含在该对象res.data属性中

          所以,res.data，才能获得之前的响应结果。