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

未完待续...