安装


使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用法


在main.js文件中,配置axios

//引入axios
import Axios from 'axios'; //将 axios 改写为 Vue 的原型属性
Vue.prototype.$axios = Axios;

在 main.js 中添加了这两行代码之后,就可以直接在组件的 created 钩子中使用 $axios 命令

created() {
this.$axios.post('https://www.easy-mock.com/mock/5b23687cf3c9fb2931a37f69/example')
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})
}

拦截器


在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

vue2.0 Axios 的简单用法的更多相关文章

  1. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

  2. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

  3. Axios的简单用法

    一转眼Vue 3.0都要发布了,学习使用Vue也有一段时间了,记录一下axios的用法 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中,有点类似于aja ...

  4. vue2.0 axios交互

    vue使用axios交互时候会出现的问题大致有三个: 1:本地调试跨域问题? 2:post请求,传参不成功,导致请求失败? 3:axios引用,在使用的组件里面引用 解决方案: 问题一:跨域? 解决本 ...

  5. vue2.0 axios前后端数据处理

    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S ...

  6. Vue2.0 axios 读取本地json文件

    参考:https://www.cnblogs.com/wdxue/p/8868982.html 1.下载插件 npm install axios --save 2.在main.js下引用axios i ...

  7. vue2.0修饰符sync用法

    如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入, 而子组件无法改变props里面的变量的值,但 ...

  8. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

随机推荐

  1. cobbler自动安装

    基础环境:centos7.2 本地IP地址:192.168.56.12 网络环境:桥接模式 一.安装cobbler # rpm -ivh http://mirrors.aliyun.com/epel/ ...

  2. 从github下载一个单一文件

    以ubuntu + wget为例 1) 浏览器中打开需要需要下载的文件 2) 点击 raw按钮 3) 从浏览器地址栏中拷贝地址 4) wget + 地址

  3. 【转载】#458 Errors While Converting Between enum and Underlying Type

    You can convert to an enum value from its underlying type by casting the underlying type (e.g. int) ...

  4. IOS 多媒体 使用总结

    一.音频播放 1.音效播放(短时间的音频文件)1> AudioServicesCreateSystemSoundID2> AudioServicesPlaySystemSound 2.音乐 ...

  5. chrome不能用百度网盘极速上传插件的解决办法

    进入chorme设置中,选择隐私设置中的内容设置,插件>自动运行,然后管理例外情况>添加“[*.]baidu.com”,后边当然选择允许,然后重启浏览器,OK了

  6. mydumper安装和使用

    安装下载安装包:wget https://launchpad.net/mydumper/0.9/0.9.1/+download/mydumper-0.9.1.tar.gz 安装依赖包:yum inst ...

  7. LA 3415 保守的老师

    题目链接:https://vjudge.net/contest/161820#problem/E 题意: 有一些同学,要从中选出一些同学来,人数尽量多,但是,两两之间要满足至少一个条件(身高差> ...

  8. 【转】Android应用程序窗口(Activity)窗口对象(Window)创建指南

    在前文中,我们分析了Android应用程序窗口的运行上下文环境的创建过程.由此可知,每一个Activity组件都有一个关联的ContextImpl对象,同时,它还关联有一个Window对象,用来描述一 ...

  9. 【luogu P1004 方格取数】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1004 标准的DP,不明白为什么有普及+提高的难度 四维DP[i][j][k][l] 表示第一遍走到i,j格子 ...

  10. 【题解】洛谷P2341 [HAOI2006]受欢迎的牛(强连通分量)

    洛谷P2341:https://www.luogu.org/problemnew/show/P2341 前言 这题看错题目 足足花了将近5小时提交了15次 在一位dalao的提醒下才AC了 记得要看清 ...