Vue中axios基础使用(一)------前端前端请求数据

axios简要说明及使用原因

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF
  • 体量相对较小

综上特征,前端工程化时,很自然额放弃了jquery(是不是不能用,只是请求数据,前端使用一定问题没有,就是体量较大,node端无法使用,启服务,做代理。。。妥妥的放弃jQuery吧);

看了vue官网介绍使用 axios 访问 API瞬间理解了大概

1.按照官网常规引入

npm install axios --save

2.使用疑问:axios并没有install 方法,所以是不能使用vue.use()方法。
百度发现:那么难道每个文件都要来引用一次?解决方法有很多种:

  • .结合 vue-axios使用
  • axios 改写为 Vue 的原型属性
  • 结合 Vuex的action

官网介绍了前两种,

本次只做前端数据请求,讲一下,最最常用的第二种方法:axios 改写为 Vue 的原型属性

axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上

import axios from ‘axios‘
Vue.prototype.$ajax= axios

在组件中使用

  • get数据(带参数和不带参)
 1 this.$ajax.get(url)
 2       .then((response)=>{
 3             this.newsList=response.data.data;
 4        })
 5       .catch((response)=>{
 6             console.log(response);
 7          })
 8       .finally(() => this.loading = false)
 9 this.$ajax.get(url, {params: param})
10       .then((response)=>{
11          this.newsList=response.data.data;
12       })
13       .catch((response)=>{
14          console.log(response);
15       }).finally(() => this.loading = false)

 

  • post请求(带参数和不带参)
 1 this.$ajax.post(url)
 2       .then((response)=>{
 3             this.newsList=response.data.data;
 4        })
 5       .catch((response)=>{
 6             console.log(response);
 7          }).finally(() => this.loading = false)
 8 
 9 this.$ajax.post(url, {params: param})
10       .then((response)=>{
11          this.newsList=response.data.data;
12       })
13       .catch((response)=>{
14          console.log(response);
15       }).finally(() => this.loading = false)

 

正如官网所说,其实 Vue 和 axios 可以在一起配合的事情不只是访问和展示一个 API。你也可以和 Serverless Function 通信,向一个有写权限的 API 发送发布/编辑/删除请求等等。下个部分将进一步讲解node中axios的应用(接口)

Vue中axios基础使用(一)------前端前端请求数据

上一篇:点击复制文字到剪贴板兼容性安卓ios


下一篇:Android模拟器不能上网的解决方法