Axios

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,才能获得之前的响应结果。

 

 

Axios

上一篇:call、apply、bind三者之间的用法和区别,并手写实现


下一篇:APP——自动化——python——截图放到电脑文件里面