一、什么是 axios ?

axios是基于 Promise 的 ajax 封装库,也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求,是一个轻量级的库,使用时可直接引入。

二、axios 的特点

  1. 异步的 ajax 请求库。
  2. 在浏览器端和 node 端都可以使用。
  3. 支持 Promise API。
  4. 支持请求和响应拦截。
  5. 响应数据自动转换 JSON 数据。
  6. 支持请求取消。
  7. 可以批量发送多个请求。
  8. 客户端支持安全保护,免受 XSRF 攻击。

三、axios API

3.1、安装

/* npm 安装 */
npm install axios --save

/* bower 安装 */
bower install axios

/* 使用 yarn */
yarn add axios

/* cdn 引入 */
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

注:如果简单静态页面使用,建议cdn方式引入。

3.2、axios API

向 axios 传输相关配置参数,创建请求。如:axios(config)

/* 如发送一个post请求的配置参数如下 */
axios({
 method: 'post', //请求方法
 url: '/user/12345', //访问接口
 data: { //传输数据
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
/* 如发送一个get请求的配置参数如下 */
axios({
  method: 'get',
  url: 'http://localhost:80/one',//请求接口
  responseType: 'stream'//响应形式
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('save.jpg')) //保存图片
  });

3.3、axios 请求方法

上边axios API 每发起一个请求,都需要设置它的请求方法和响应头超时等信息,使用起来比较繁琐,为了方便,axios 为所有支持的请求方法提供了别名,可直接指定方式发起请求,其他参数可通过全局设置。如:

axios('/user/id=1');

上述 axios 直接发送请求,不设置请求方式时,默认使用 get 请求,与 ajax 和 fetch 相同。所以发送的是一个get请求,也可以使用 get 方法发送,如下实例:

axios.get( 
  '1.txt' , 
  {
   params:{id:'1'}
  }
).then(res=>{
  console.log(res);
 })
 .catch(err=>{
 console.log(err);
})

可简写成 axios(url,config)。

具体的其他方法分别为:

axios.request(config)
axios.get( url , config)
axios.delete( url , config)
axios.head( url , config)
axios.options( url , config)
axios.post( url [,data [, config ]])
axios.put( url [,data [, config ]])
axios.patch( url [,data [, config ]])

3.4、批量发送请求

网络请求中往往会有多个网络请求并发执行,有时需要统一处理它们返回结果,所以axios有并发处理。axios.all()可以并行发送多个网络请求,等待请求都返回之后,继续处理。

使用语法:

/* 第一种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(res=>{
    console.log(res) //返回的res是一个数组,res[0]是第一个请求数据 res[1]是第二个请求数据
})

/* 第二种处理方式 */
axios.all([
 axios.get(URL1),
 axios.get(URL2),
]).then(
 axios.spread((res1,res2)=>{
   res1 //是第一个请求返回数据
   res2 //是第二个请求返回数据
  })
)

使用 axios.spread 能够自动分割请求返回数据。

1.5、全局默认配置

全局默认配置主要作用于每个请求。既节省敲代码的时间,想修改的时候,只需修改一个就可以全部修改掉。

常见的全局默认配置有:

axios.defaults.baseURL = "http://localhost:8080/" //配置域名
axios.defaults.timeout = 6000; //单位是毫秒,设置超时时间

/* 头设置 */
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3.6、axios 实例

// 实例化的时候配置默认参数
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

之所以使用 axios 实例化,是因为全局实例化 http 请求有全局的响应拦截,当我们某些接口无法返回状态码时,我们将无法得到 response,此时我们需要在当前 api 中重新实例化一个 axios,设置新的响应拦截码。

3.7、拦截器

拦截器分为两个,有请求拦截和响应拦截,可以统一处理某些业务。

  • 请求拦截器:
/* 
请求拦截器
统一在发送请求之前添加token
*/
axios.interceptors.request.use(config=>{
 config.headers.token = sessionStorage.getItem("token") //添加toke
  return config
},err=>{
 console.log(err)//请求错误
})
  • 响应拦截器
axios.interceptors.response.use(response=>{
  return response
},err=>{
 console.log(err)//响应错误
})

3.8、响应内容

基本使用中,第一个实例请求成功,打印结果 console.log(res) 。返回结果如下:

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //config是在请求的时候的一些配置信息
  config: {}
}

四、axios 常见应用

axios既可以在浏览器端使用,也可以在node.js中使用。在浏览器端发送的是XMLHttpRequest,在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。

标签智能推荐:

//……关于后端分离与不分离

什么是前后端分离?在前后端分离的应用模式中,后端只需要返回前端所需的数据,不用渲染HTML页面与效果。页面的展示与效果所需的数据,数据的加载方式,主要由前端决定。核心思想是前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互。在前后端分离的应用模式中,前端与后端的耦合度相对较低。在前后端分离的应用模式中,我们通常将后端开发的每个视图都称为一个接口,或者API,

Swagger介绍和集成

介前后端分离vue+springboot&nbsp;主流前后端分离方案后端时代:前端只用管理静态页面;html==&gt;后端,模板引擎JSP==&gt;后端是主力前后端分离时代:后端:后端控制层,服务层service,数据访问层前端:前端控制层,视图层伪造后端数据,json,已经存在,不需要后端,前端工程依旧能够跑前后端如何交互?==&gt;API前后端相对独立,松耦合;前后端甚至可以部署在不同

node.js是前端还是后端

之前去面试的时候,很多面试官都问会不会node.js、说node.js是前端,不是后端。个人反驳一下:前端的工作:前端是写页面,请求数据,拿到数据之后,渲染数据,与用户的交互,这些是前端的工作后端的工作:提供接口,操作数据库,修改数据,完成业务逻辑node.js:是一个服务器,提供接口,操作数据库,就算不操作数据库,那也是提供了接口。前端人员的工作是写接口么?所以,各位前端去面试的朋友,当被问到n

《浅谈架构之路:后端分离模式》

:当后端API没有编写完成时,前端无法进行调试,这就导致了前端会被后端阻塞的情况。其实像这种互相等待的模式需要改进,&nbsp;MockServer可能可以解决一些问题。如何前后端分离?怎么做前后端分离?大方向就是后端专注于:后端控制层(RestfulAPI)&nbsp;&amp;服务层&amp;数据访问层;前端专注于:前端控制层(Nodejs)&amp;视图层本人认为的前后端分离模式应该是这样,

第17组 Beta 冲刺(5/6)(康宇桓)

工作项目相关已完成工作前端完成界面及部署服务器,优化界面样式。后端完成模型训练与测试(训练次数还不够)。&nbsp;&nbsp;计划完成工作实现交互接口,修改新添数据集格式用以测试。小组成员分工成员成员分工钟卓桦、孔靖雅负责前端网页实现,有前端框架基础,实现较快孔深弘、温昕负责收集整理数据集与前后端交互与接口康宇桓、张瀚天负责后端处理,实现项目模型与数据处理遇到的困难可能需要的接口还未完全条理清晰

22-4-10 理解接口的含义?

前端:你看的见的页面就是前端;如:淘宝页面,小程序,pc和手机端的web;网页语言三件套:后端:后端语言:前后端关系前端代码运行在客户端,后端代码运行在服务器。接口:接口是这么回事,比如,前端静态页面已经写好了,需要换乘后端提供的动态的数据,这个时候就要用到接口了。调用api或者说调用接口:api全称的意思就是应用程序接口;接口就是两个东西相互连接的地方:ajax请求:

Spring Boot +Vue 项目实战笔记(三):数据库的引入

验证用户名与密码。&nbsp;Vue.js+SpringBoot前后端分离项目实践(三):前后端结合测试(登录页面开发)我们的项目会在很长一段时间内采取这种简单的三层架构(DAO+Service+Controller),希望大家能慢慢体会这三个模块的分工。这里我简单总结一下,先有个初步印象:DAO用于与数据库的直接交互,定义增删改查等操作Service负责业务逻辑,跟功能相关的代码一般写在这里,编

以Flask框架写的接口为例的AJAX的后端交互的模板

接口为例的AJAX的前后端交互的模板默认已经引入axios或者jQuery的CDN代码如下:前端上传数据(在js里的添加)$.ajaxSetup({async:true});//设置异步,当设置为false即同步时,执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。反之则反。$.ajax({url:"/get",//接口type:"post",d

(转)也谈基于NodeJS的全栈式开发(基于NodeJS的后端分离)

,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本。这个话题最近被讨论得比较多,阿里有些BU也在进行一些尝试。讨论了很久之后,我们团队决定探索一套基于NodeJS的前后端分离方案,过程中有一些不断变化的认识以及思考,记录在这里,也希望看到的同学参与讨论,帮我们完善。一、什么是前后端分离?最开始组内讨论的过程中我发现,每个人对前后

vue基础---13vue-router

TML和css代码。e、这就叫做后端渲染,也叫服务端渲染。传到浏览器的就是已经渲染好的页面。3.后端路由:浏览器可能从网站中请求很多个页面,每一个请求的URL和页面之间形成一种映射关系;后端处理URL和页面之间映射关系的路由称作后端路由,可以理解为路由表。4.例图:02.前后端分离阶段1.前后端分离简介:随着Ajax的出现,有了前后端分离的开发模式,后端只提供API来返回数据,前端通过Ajax获取