Vue 中发送网络请求

1: axios： 发送网络情求， 对第三方框架进行封装。

在vue 中发送网络请求方式非常多
1: 第一种传统的ajax 请求基于XMLHttpRequest(XML);
  基于传统的的ajax 请求配置调试非常混乱
2: 第二种jquery-ajax 请求;

  相对于传统的ajax 请求非常好用。

3: 第三就是vue1.0的时候  官方推荐使用Vue-resource 
    Vue-resource 体积比jquery-ajax 体积小过很多。

4: 在 Vue2.0中推荐使用axios;

在前端开发中, 我们常见的我网络请求就是JSOPN

  使用jsonp 的核心就是在于通<script> 标签的src 属性来帮助我们请求数据;

 JSONP: 原理是什么？
 
 (1): jsonp的核心在于通过<script> 标签的的src 属性来帮助我们请求数据
 (2): 原因就是当我们的项目于部署到 xxx1.com 服务器上时, 是不能直接访问 xxx2.com 服务器上的资料的

 (3):  这个时候我们需要使用<script> 标签的src 帮助我们去服务器请求到数据, 将数据当作一个
 javascipt 函数来执行，并且在执行过程中传入我们需要的json 格式。

 (4): 所以封装jsonp 的核心就是在于监听window 上的jsonp 进行回调时的名称。

 为什么要推荐使用axios 使用:
 功能特点:  1: 在浏览器中发送XMLHttpRequest 请求:
 2: 在node.js 中发送http 请求
 3: 支持promise API 
 4: 拦截请求和响应请求
 5：转化请求和响应数据

对axios 理解： 
 axios ===> ajax i/o systme 输入/输出流

在vue 项目项目中进行安装axios 网络请求
首先在项目中安装aixos  npm install axios --save

在main.js 中文件中引入:  import axios form 'axios';
然后就可以配置axios

 axios(config):  config:  接受一个对象;
 对象包含请求方式:  请求路径,  请求参数
 
 axios 网络请求支持promise 的,   .then可以获取到成功以后的数据
 .catch 获取失败的以后的数据

  jsonp: 方式就是执行的这个函数,  然后把结果在返回给回来。
  
  请求方式报错,  可能会出现跨域的问题。 
  axios： 网路请求可以跟上请求方式： method: get 请求,  post 请求,  put 请求  delete 请求

  post 请求: 需要传递参数  可以用data 接受参数。
  如果同是需要拿到两个网络请求的数据, 可以使用promise.all 请求方式。

1: promise.all([this.getlist(), this.getData()]);
   获取两个方法:  可以使用数据的形式。

2: 有时候我们需要同时发送两个请求: 使用promise.all 的方法,  可以放入多个请求的数组。
  
   promise.all([]),  返回的是一个数组,  可以使用axios.spread 可以将数组 [res1, res2] 
  展开为res1, res2.

3: 在实际开发中, 我们有很多参数是固定的。
   对axios 进行一个全局的配置,
   axios.default.baseURL = ""  设置根请求路径
   axios.default.header.post['Content-Type'] = 'application/x-www-form-urlencoded'
   // 设置请求头
   // 还可以设置请求超时时间  (timeout)  请求超时时间
   axios.default.timeout = 5000;   设置请求的超时间
   超时就是客户端请求服务器的时间过长。
   请求地址: url,  请求类型: method  请求根路径,
   请求前数据处理 transformRequest: ( function() {} )
   请求后数据处理： transformResponse( funtion() {} )
4: 如果直接使axios库,  其实时是使用AxiosStatic

  

5： 创建axios 实例的场景

1: 后端接口可能部署到多个端, 
 服务器就是有一个分布式, 当服务器并发量比较高的时候,  就需要使用反向代理。 
 如果只有一个服务器,  假如说有过很多用户发送请求, 服务器处理不过来。
 三个服务器的ip 地址是不相同的,  一般会使用反向代理服务器, 

 分布式架构微服务思想 

2:  现在使用的场景,  首页请求一个IP地址, 列表页数据请求另外一个数据。
 
    我们就需要创建axios 实例。 如果使用的全局axios 请求就不符合要求。
    

3: 创建对应的axios实例

 const instance = axios.create({
   // 设置请求根路径
   // 设置超时时间
 })

4：如果请求的地址是另外一个服务器:  就需要创建另外一个axios 实例。
   每一个实例都有自己的独立的配置。 如果使用全局的网络请求就不太合适。

5:  created() {}:   生命周期函数就是组件创建完成。
    mounted() {};  data 数据源渲染到组件上,