Axios场景应用数据请求-基于Vue

Axios是什么：

理解：基于promise的Http库（轻量级），可以发送get、post请求

Axios特性：

• 可以在浏览器发送XMLHttpRequests
• 可以在node.js发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 能够取消请求
• 自动转换JSON数据
• 客户端支持安全XSRF

Axios使用：

node安装

  cnpm install --save axios

save依赖于生产环境，另一为开发环境

运行

  nmp run dev

首页里添加方法

  methods:{
    getList(){
        axios.get("http://127.0.0.1:7002/home/page/1/10").then(res=>{//url是本地的数据获取
          console.log(res)//打印结果看看
        })
    }

不忘记在首页生命周期里调用上面方法

  mounted.function(){
    this.getList();
  }

在main.js文件引入axios

•  import axios from 'axios'//其实不建议这种方法，方法看下一个
  

•  Vue.prototype.$http = axios//将axios存储在Vue的原型对象中，随意定义一个变量名存储
   axios.defaults.baseURL = 'http://127.0.0.1:7002'//方便测试阶段，后续只需要改变端口
  

首页里改进方法

  methods:{
    getList(){
        axios.$http.get("/home/page/1/10").then(res=>{//url是本地的数据获取
          console.log(res)//打印结果看看
        })
    }

未完待续...