安装


使用 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. March 16 2017 Week 11 Thursday

    Adventure may hurt you, but monotony will kill you. 也许冒险会让你受伤,但一成不变会让你灭亡. The very theme of the univ ...

  2. python功能

    1.前端使用ajax 项目名字/views.py from django.shortcuts import render from django.http import JsonResponse fr ...

  3. 给Retext进行配置:语法高亮、数学公式、自定义样式

    由于转到了Ubuntu下,本来在Windows平台下使用的一直是MarkdownPro2,而且进行了破解,十分好用.转到Ubuntu下后,MarkdownPro2不能够使用了,找了下Linux平台中的 ...

  4. Android(java)学习笔记11:生产者和消费者之等待唤醒机制

    1. 首先我们根据梳理我们之前Android(java)学习笔记70中,关于生产者和消费者程序思路: 2. 下面我们就要重点介绍这个等待唤醒机制: (1)第一步:还是先通过代码体现出等待唤醒机制 下面 ...

  5. public class Promise<T>: Thenable, CatchMixin

    public class Promise<T>: Thenable, CatchMixin

  6. 成都夏季招聘会IT行业缺口大!

    上个周末成都的夏季招聘会在新会展中心举行,我们传智播客的专业市场调查员也深入当中.了解IT行业招聘情况,我们发如今IT软件行业专区招聘的公司特别多,可是去应聘的人却非常少.这意味着IT行业正处于供不应 ...

  7. 添加模糊效果demo

    添加模糊效果demo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  8. eclipse 安装/卸载插件

    1.通过Help>>Install New Soft 之后弹出对话框,可以通过“Add”按钮添加已经有的插件的(zip等)或者输入安装地址,之后按照要求即可.2.对于安装失败的插件,再次进 ...

  9. hadoop 错误

    错误:DataXceiver error processing WRITE_BLOCK operation 2014-05-06 15:21:30,378 ERROR org.apache.hadoo ...

  10. 消息中间件JMS(一)

    1.JMS入门 1.1消息中间件 模块之间的依赖也称之为耦合.而耦合越多,之后的维护工作就越困难.那么如果改善系统模块调用关系.减少模块之间的耦合呢?我们接下来就介绍一种解决方案----消息中间件. ...