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

转载于:https://www.cnblogs.com/yogic/p/11046610.html