Vue学习总结--axios

一、Vue中发送网络请求有很多的方式。那么在开发中如何进行选择呢？

• 选择一：传统的Ajax是基于XMLHttpRequest（XHR）

        为什么不用它呢？
            配置和调用方式等非常混乱；
            编码起来看起来就非常蛋疼;
            所以在真实开发中很少直接使用，而是使用jQuery-Ajax。

• 选择二：在前面的学习中，我们经常会使用jQuery-Ajax

        优点：

            相对于传统的Ajax非常好用。

        为什么不选择它呢？
            首先，我们先明确一点：在Vue的整个开发中都是不使用jQuery了。
            那么，就意味着为了方便我们进行一个网络请求，特意引用了一个jQuery，这样不合理。
            jQuery的代码1W+行。
            Vue的代码才1W+行
            完全没有必要为了用网络请求就引用这个重量级的框架。

• 选择三：官方在Vue1.X的时候，推出了Vue-resource。

        优点：

            Vue-resource的体积相对于jQuery小很多。
            另外Vue-resource是官方推出的。

        为什么不选择它呢？
            在Vue2.0推出后，Vue作者就在Github的Issues中说名了去掉vue-resource，并且以后也不会再更新。
            那么意味着以后vue-resource不再支持新的版本时，也不会再继续更新和维护。
            对以后的项目开发和维护都存在很大的隐患。

• 选择四：在说明不再继续更新和维护vue-resource的同时，作者还推荐了一个框架：axios

  axios有非常多的优点，并且用起来也非常方便。所以经常在Vue开发中选择它。

二、jsonp

在前端开发中，我们一种常见的网络请求方式就JSONP。

使用JSONP最主要的原因往往是为了解决跨域访问的问题。

JSNP的原理是什么呢？

• JSONP的核心在于通过<scrip>标签的src来帮助我们请求数据。
• 原因是我们的项目部署在domain1.com服务器上时，是不能直接访问domain2.com服务器上的资料的。
• 这个时候，我们利用<scrip>标签的src帮助我们去服务器请求到数据，将数据当做一个javascript的函数来执行，并且执行的过程中传入我们需要的json。
•  所以，封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称。

jsonp如何封装呢？

我们一起自己来封装一个处理JSONP的代码吧。

支持多种请求方式：
axios(config)--默认使用的是get请求。想要专门指定请求方式，需要设置config，config里面有个method，可以设置对应的post、delete、put等。
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config])
axios.push(url[,data[,config])
axios.patch(url[,data[,config])