一、概述

在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. java中File类的常用方法总结

    java中File类的常用方法 创建: createNewFile()在指定的路径创建一个空文件,成功返回true,如果已经存在就不创建,然后返回false. mkdir() 在指定的位置创建一个此抽 ...

  2. ORACLE 把不是SYS用户下的所有JOB删除掉

    BEGIN  FOR job_id in(select job,log_user,priv_user,schema_user from dba_jobs)   LOOP    IF(job_id.lo ...

  3. Python 面向对象基础(类、实例、方法、属性封装)

    python是面向对象语言,一切皆对象. 面向过程: 变量和函数. “散落” 在文件的各个位置,甚至是不同文件中.看不出变量与函数的相关性,非常不利于维护,设计模式不清晰. 经常导致程序员,忘记某个变 ...

  4. with as 如何工作

    with as 如何工作   with如何工作? Python对with的处理还是很机智滴.基本思想就是with所求值的对象必须有一个__enter__()方法,一个__exit__()方法 紧跟wi ...

  5. php中in_array一些问题

    var_dump(in_array(1,['s','1fsdf',12])); // true var_dump(in_array(0,[4,'erdd']));  // true 因为是要用值与数组 ...

  6. 已知一个函数rand7()能够生成1-7的随机数，请给出一个函数rand10()，该函数能够生成1-10的随机数。

    题目: 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数,该函数能够生成1-10的随机数. 思路: 假如已知一个函数能够生成1-49的随机数,那么如何以此生成1-10的随机数呢? 解法 ...

  7. vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  8. PHP遍历数组常用方式（for,foreach,while,指针等等）

    1使用for循环遍历数组 count($arr)用于统计数组元素个数         for循环只能用于遍历,纯索引数组!!如果存在关联数组,count统计两种数组的总个数         使用for ...

  9. Codeforces Beta Round #52 (Div. 2)

    Codeforces Beta Round #52 (Div. 2) http://codeforces.com/contest/56 A #include<bits/stdc++.h> ...

  10. ViewResolver和JSTL

    ---------------------siwuxie095                                 ViewResolver 和 JSTL         1.Spring ...