vue.js使用axios
使用axios的两种调用方式
1.安装axios
$ cnpm install axios
2.在vue入口文件main.js中引入(推荐全局引入),或是在当前页面中引入(局部)
import axios from 'axios';
方法一:
在页面中直接调用,代码如下:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
.catch(error => console.log(error))
} })
方法二:
如果我们的页面经常需要请求接口获取数据,而且逻辑代码比较多的话,不妨将axios提取出来,封装到一个api的文件中,然后在页面中引入直接调用,这样看起来页面会简洁很多
接口全部放到api文件中方便管理,API文件代码如下:
api/index.js
import _axios from 'axios' /**
* 配置axios的新实例
*/
const axios = _axios.create({
baseURL: '',
timeout: 1000
}) /**
* 错误、警告提示
*/
axios.interceptors.response.use(function (response) {
const { data } = response
if (data.code !== 0) {
Vue.prototype.$snack.error({
message: data.message
})
return Promise.reject(data)
} else {
return data.data
}
}, function (error) {
Vue.prototype.$snack.error({
message: error.message
})
return Promise.reject(error)
}) export const userApi = {
//获取用户列表
getUserList (params) {
return axios({
url: '/api/user/users',
method: 'get',
params
})
},
//删除用户
deleteUser (id) {
return axios({
url: '/api/user/user',
method: 'delete',
params: {
id
}
})
}
}
页面引入
user/index.vue
import {userApi} from '../../api' export default {
data:(){
return {
userList:[],
offset: 0,
pageSize: 10
}
},
methods: {
//获取用户列表
async getUserList(){
const params = {
offset: this.offset,
pageSize: this.pageSize
}
this.userList = await userApi.getUserList(params)
}
},
。
。
。
。
}
还不清楚的可以看下官方文档 https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
vue.js使用axios的更多相关文章
- 使用Vue.js和Axios从第三方API获取数据 — SitePoint
更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...
- Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. Github开源地址: ht ...
- vue.js 配置axios 用来ajax请求数据
* 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...
- vue.js中axios的封装
基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...
- 【原创】Vue.js 中 axios 跨域访问错误
1.假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...
- Flask Vue.js全栈开发
Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...
- (私人收藏)Vue.js手册及教程
(私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...
- Vue.js 2.x笔记:服务请求axios(8)
1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...
随机推荐
- June 24th 2017 Week 25th Saturday
Who is able to be egotistical needs to be strong too. 有本事任性的人,也要有本事坚强. What is egotistical? Is it th ...
- S/4HANA业务角色概览之订单到收款篇
大家好我叫Sean Zhang,中文名张正永.目前在S/4HANA产品研发部门任职产品经理,而这一阶段要从2017年算起,而在那之前接触更多还是技术类的,比如做过iOS.HANA.ABAP.UI5等等 ...
- Java中类继承、接口实现的一些要注意的细节问题
1.接口A和接口B有相同的方法,只是返回值不同,则实现类不能同时实现这两个接口中的方法. 接口A有void C()方法,接口B有int C()方法,则无法同时实现这两个接口. Java为了弥补类单继承 ...
- Intellij IDEA Organize Imports
使用Eclipse进行开发时,我喜欢用Ctrl + Shift + O快捷键管理Java类的导入,它可以导入所需的Java类,去除不需要的Java类. Eclipse的Organize Imports ...
- ThreadLocal介绍
作者:知乎用户链接:https://www.zhihu.com/question/23089780/answer/62097840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- async--ajax异步传输
如图:轨迹点组编号依赖所属路口的设置. 所以ajax是异步执行,获取到所属路口还没执行完,就已经执行到根据所述路口获取轨迹点组编号,所以获取不到轨迹点组编号. async:false改成同步执行.就没 ...
- ServletRequest的四个主要方法
package com.yunqing.servlet; import javax.servlet.*; import java.io.IOException; import java.util.Ar ...
- JavaScript读取本地json文件
JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...
- java中StringBuffer与String、StringBuilder的区别
在java中我们经常可以看到StringBuffer和String的用法,但是我自己在使用过程中,经常会将两者弄混淆,今天我们就来了解一下两者的区别: 我们首先来看一下我们的官方API中的简单介绍: ...
- [转]C#如何获取客户端IP地址
代码如下: /// <summary> /// 获取客户端IP地址 /// </summary> /// <returns></returns> ...