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 ...
随机推荐
- g++: error: unrecognized command line option ‘-std=C++11’
一个小程序,在编译的时候出错,原来使用的编译命令是 g++ -std=C++11 array.cpp -o array.exe g++: error: unrecognized command lin ...
- OC基础数据类型-NSDictionary
1.字典NSDictionary 字典与数组的区别:数组讲究顺序,而字典可以快速帮助我们找到数据,数据是我们的目的,键是我们的手段 NSDictionary *dict = [[NSDictionar ...
- 用jq给link和script标签加随机的版本号(兼容IE5)
$("link,script").each(function(){ var t=Math.random().toFixed(4); /*var $tag=$(this).prop( ...
- jsp 页面显示格式化的日期
在页面引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 使用 ...
- 原生JS写验证码
1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮 <input type="text" class=&quo ...
- #20145238荆玉茗《网络对抗》-逆向及Bof进阶实践
20145238荆玉茗<网络对抗>-逆向及Bof进阶实践 实践目的:注入shellcode 准备一段shellcode代码 Shellcode实际是一段代码(也可以是填充数据),是用来发送 ...
- rfcn校招总结
idea:ROI pooling前都是卷积,是具备平移不变性的,但一旦插入ROI pooling之后,后面的网络结构就不再具备平移不变性了,就解决了分类和定位的矛盾,但因为引入roi-wise lay ...
- JVM 内部原理
1.JVM的组成: JVM 由类加载器子系统.运行时数据区.执行引擎以及本地方法接口组成. 2.JVM的运行原理: JVM是java的核心和基础,在java编译器和os平台之间的虚拟处理器.它是一种基 ...
- mysql的入门基本使用(适合新手学习)
登陆Mysql数据库mysql -u root -p 展示(查询)所有数据库show databases;进入数据库use dataname;创建数据库create database dataname ...
- 【浏览器-Safari-网页开发指南】官方Sarari开发指南译文
Safari是一个功能比较完整的浏览器.它支持所有按照W3C标准HTML,CSS,Javascript开发的网页. 当然,让网站正常访问只是我们的初级目标.开发者应该致力于给用户提供更好的用户体验.比 ...