网络模块封装-axio

网络模块封装-axios

1. 网络请求模块的选择

   —传统的Ajax是基于XML Http Request(XHR)，缺点：配置和调用方式等非常混乱；真实开发中很少直接使用，而是使用jQuery-Ajax；

   —Vue开发中不需要使用jQuery，完全没必要为了网络请求而引用这个重量级的框架；

   —Vue1.x版本中，官方推出了Vue-resource，相对于jQuery体积要小，但是不支持Vue新版本，也不会继续更新和维护，对以后的项目开发和维护存在很大的隐患；

   —axios有很多优点，在浏览器中发送XHR请求；在node.js中发送http请求；支持Promise API；拦截请求和响应；转换请求和响应数据；

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

2. axios基本框架

   —安装axios框架：npm install axios --save；

   —简单使用：

   import axios from 'axios'
   axios({
         
    url:'http://123.207.32.32:8000/home/multidata',
    //专门对get请求的参数拼接
    params:{
         
        type:'pop',
        page:1
    }
   }).then(res => {
         
    console.