一、概述

在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. 破解webstorm

    补丁下载链接:http://idea.lanyus.com/ 第一步:将补丁复制到安装目录的bin目录下 第二步:修改同目录下的 WebStorm.exe.vmoptions 和WebStorm64. ...

  2. The <classpath> or <modulepath> for <junit> must include junit.jar if not in Ant's own classpath

    The <classpath> or <modulepath> for <junit> must include junit.jar if not in Ant's ...

  3. stock抓取基本资料

    use Goutte\Client; use GuzzleHttp\Client as GuzzleClient; include './vendor/autoload.php'; $client = ...

  4. openvpn 使用账户密码认证

    OpenVPN使用user/passwd完成验证登录 OpenVPN使用user/passwd完成验证登录1,为什么要使用user/passwd?比常规openvpn管理方便,删除用户只需要在pwd. ...

  5. centos 7.2 安装域名服务器（bind9.9 集群--主从架构）,私有域名服务器+缓存

    1.安装组件 yum install bind bind-utils -y 2.启动域名服务 service named start chkconfig named on ss -unlt |grep ...

  6. poj3279（枚举）

    题目链接:https://vjudge.net/contest/294982#problem/C 题意:给定由0,1组成的m*n型矩阵,每次翻转一个结点会顺带翻转与其相邻的结点,问将矩阵翻转为全0的最 ...

  7. Nginx的配置文件nginx.conf配置详解

    user nginx nginx; #Nginx用户及组:用户 组.window下不指定 worker_processes 8; #工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍于CPU. ...

  8. PAT1021(dfs 连通分量）

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  9. The following packages have unmet dependencies错误

    当出现类似这类错误: The following packages have unmet dependencies: python-dev : Depends: python (= 2.7.5-5ub ...

  10. HDU 6214 Smallest Minimum Cut(最少边最小割)

    Problem Description Consider a network G=(V,E) with source s and sink t. An s-t cut is a partition o ...