使用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的更多相关文章

  1. 使用Vue.js和Axios从第三方API获取数据 — SitePoint

    更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...

  2. Vue.js Ajax(axios)

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. Github开源地址: ht ...

  3. vue.js 配置axios 用来ajax请求数据

    * 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...

  4. vue.js中axios的封装

    基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...

  5. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  6. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

  7. Flask Vue.js全栈开发

    Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...

  8. (私人收藏)Vue.js手册及教程

    (私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ5lrt Vue.js手册及教程 Vue.js 教程 Vue.js 安 ...

  9. Vue.js 2.x笔记:服务请求axios(8)

    1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...

随机推荐

  1. June 24th 2017 Week 25th Saturday

    Who is able to be egotistical needs to be strong too. 有本事任性的人,也要有本事坚强. What is egotistical? Is it th ...

  2. S/4HANA业务角色概览之订单到收款篇

    大家好我叫Sean Zhang,中文名张正永.目前在S/4HANA产品研发部门任职产品经理,而这一阶段要从2017年算起,而在那之前接触更多还是技术类的,比如做过iOS.HANA.ABAP.UI5等等 ...

  3. Java中类继承、接口实现的一些要注意的细节问题

    1.接口A和接口B有相同的方法,只是返回值不同,则实现类不能同时实现这两个接口中的方法. 接口A有void C()方法,接口B有int C()方法,则无法同时实现这两个接口. Java为了弥补类单继承 ...

  4. Intellij IDEA Organize Imports

    使用Eclipse进行开发时,我喜欢用Ctrl + Shift + O快捷键管理Java类的导入,它可以导入所需的Java类,去除不需要的Java类. Eclipse的Organize Imports ...

  5. ThreadLocal介绍

    作者:知乎用户链接:https://www.zhihu.com/question/23089780/answer/62097840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  6. async--ajax异步传输

    如图:轨迹点组编号依赖所属路口的设置. 所以ajax是异步执行,获取到所属路口还没执行完,就已经执行到根据所述路口获取轨迹点组编号,所以获取不到轨迹点组编号. async:false改成同步执行.就没 ...

  7. ServletRequest的四个主要方法

    package com.yunqing.servlet; import javax.servlet.*; import java.io.IOException; import java.util.Ar ...

  8. JavaScript读取本地json文件

    JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...

  9. java中StringBuffer与String、StringBuilder的区别

    在java中我们经常可以看到StringBuffer和String的用法,但是我自己在使用过程中,经常会将两者弄混淆,今天我们就来了解一下两者的区别: 我们首先来看一下我们的官方API中的简单介绍: ...

  10. [转]C#如何获取客户端IP地址

    代码如下: /// <summary> /// 获取客户端IP地址    /// </summary> /// <returns></returns> ...