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的应用（接口）