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)//打印结果看看
        })
    }

未完待续...

posted @ 2020-07-01 01:55  奋斗的小树酱tao  阅读(131)  评论(0编辑  收藏  举报