Vue.js（Axios）

Axios

• 什么是:
  • Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
• 何时:
  • 主要用于创建请求
  • 在浏览器中，创建xhr请求； 在node.js中，创建普通http请求
• 为什么:
  • 浏览器中创建xhr请求: 4种方案:
    • (1)使用原生XHR对象——麻烦
    • (2)使用jQuery的封装函数——大材小用(jQuery中岂止ajax，还包含大量DOM/动画等操作，而Vue只使用ajax，别的都不用。)
    • (3)使用官方提供的VueResource插件——官方废弃
    • (4)使用第三方工具Axios——本身与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-Allow-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"
  • 使用
    • axios.post(“url”, Qs.stringify({ 参数: 值, 参数: 值, ... })).then()
    • 结果:
      • stringify会将对象转化为queryString语法
  • 坑！！！：获得响应主体的数据: 数据不是直接返回，而是包裹在一个对象的data属性中返回。
    • 无论是get/post方式请求，获得的响应都是一个全新的对象。传统的响应数据，包含在该对象的res.data属性中
    • 所以，res.data，才能获得之前的响应结果