一、概述

在vue2.0项目中，我们主要使用axios进行http请求。

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特征：

1、从浏览器中创建XMLHttpRequests

2、从 node.js 创建http请求

3、支持PromiseAPI

4、支持拦截请求和响应

5、支持转换请求数据和响应数据

6、可以取消请求

7、自动转换 JSON 数据

8、客户端支持防御XSRF

二、IE兼容性

axios是基于 promise，而promise对IE不支持，所以在进行axios使用之前，需要对IE做兼容性处理。这里主要使用到'babel-polyfill'。

使用npm进行安装，npm install babel-polyfill --save

在main.js中导入。

这样它将会把ES6代码转为ES5代码，从而可以在现有环境执行。因此我们可以用ES6编写，而不用考虑环境支持的问题。

三、axios拦截

1、npm安装axios

     npm install axios --save

2、搭建结构。src文件下建立axios文件夹，并在axios下建立index.js。

 

3、index.js中进行axios拦截封装。

 

4、main.js中引入

 

5、api调用axios进行数据请求

 

vue入门：axios的应用及拦截封装的更多相关文章

  1. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  2. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  3. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  4. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  5. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  6. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  7. 【Vue】axios封装，更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  8. 【vue】axios二次封装，更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  9. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

随机推荐

  1. https方式下 git push 每次都要输入密码的解决办法

    转载自:http://git.oschina.net/oschina/git-osc/issues/2586   作者:Zoker https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输 ...

  2. js增减日期

    参考 https://www.cnblogs.com/gmq-sh/p/5194706.html date.setDate(date.getDate() + 3);

  3. openstack 相关服务常用命令整理

    1. 数据库: # systemctl start mysqld # systemctl enable mysqld # systemctl status mysqld #mysql> show ...

  4. MongoDB修改默认数据库

    在某些情况下,我们并不想把mongoDB的数据库放在c盘,这时候有两种方法可以切换数据库目录. 1.命令方式 首先创建数据路目录,例如:E:\data\db.然后运行命令 mongod -dbpath ...

  5. delet[] 和delete

    string *stringPtr1 = new string; string *stringPtr2 = new string[100]; …… delete stringPtr1; delete ...

  6. ora-12899解决方法

    在使用ORACLE的过程中,会出现各种各样的问题,各种各样的错误,其中ORA-12899就是前段时间我在将数据导入到我本地机器上的时候一直出现的问题.不过还好已经解决了这个问题,现在分享一下,解决方案 ...

  7. http://ctf.bugku.com/challenges#Timer(%E9%98%BF%E9%87%8CCTF)：Bugku——Timer(阿里CTF)

      做了第一个android apk逆向题,很多工具啥的还没用过,再接再厉.   找到方法发现这个apk支持的SDK API是15-17,于是就下载了API 16并制作了模拟器,但发现还是运行不起来, ...

  8. 100-days: Three

    Title: Singapore(新加坡) set to raise retirement ages as seniors stay healthier be set to do sth.  准备做某 ...

  9. php ActiveMQ的发送消息，与处理消息

    我们以一个简单的用户注册为例,当用户点击注册按钮后,我们发送一个消息,后台php接收到该消息然后处理. 1.php代码如下: <?php $stomp = new Stomp('tcp://19 ...

  10. SSI服务端包含技术

    1.页面拆出来怎么样通过web服务浏览呢? 使用web服务(例如nginx)的SSI技术,将多个子页面合并渲染输出. 2.SSI是什么? 3. ssi包含类似于jsp页面中的incluce指令,ssi ...