axios概念介绍和基本使用 axios概念介绍和基本使用

简介
使用axios

配置对象常用的配置项：

默认配置

axios拦截器

取消请求

总结

简介本文主要讲解axios的概念和基本使用。
axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。
支持的功能：

从浏览器发出 XMLHttpRequests请求。
从 node.js 发出 http 请求。
支持 Promise API。
能拦截请求和响应。
能转换请求和响应数据。
取消请求。
实现JSON数据的自动转换。
客户端支持防止 XSRF攻击。

先借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单的可以接收restful的服务。
github地址：https://github.com/typicode/json-server
第一步：安装：npm install -g json-server

文章图片

第二步：创建一个名为db.json的文件，把网站的数据复制进去。

{"posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],"comments": [{ "id": 1, "body": "some comment", "postId": 1 }],"profile": { "name": "typicode" }}

第三步：启动命令：json-server --watch db.json

文章图片

访问http://localhost:3000/posts 下面页面为成功

文章图片

使用axios GitHub地址：https://github.com/axios/axios

文章图片

为了方便，我们直接使用第四种。

axios基本使用 - 锐客网

其他发送请求的api:

请求的响应结果结构分析：

文章图片

配置对象常用的配置项：

{// 路径urlurl: '/user',// 请求方法，默认getmethod: 'get', //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁baseURL: 'https://some-domain.com/api/',//设置请求头headers: {'X-Requested-With': 'XMLHttpRequest'},//设置请求url的query参数，可以使得url简洁。//比如url是https://some-domain.com/api/user然后params如下设置，那么最终的url是：//https://some-domain.com/api/user?ID=12345&name=Jackparams: {ID: 12345,name:"Jack"}, //设置请求体data: {firstName: 'Fred'},//设置请求的另外一种格式，不过这个是直接设置字符串的data: 'Country=Brasil&City=Belo Horizonte', //请求超时，单位毫秒，默认0，不超时。timeout: 1000,//响应数据类型，默认jsonresponseType: 'json', //响应数据的编码规则，默认utf-8responseEncoding: 'utf8', //响应体的最大长度 maxContentLength: 2000,// 请求体的最大长度maxBodyLength: 2000,//设置响应状态码为多少时是成功，调用resolve，否则调用reject失败//默认是大于等于200，小于300validateStatus: function (status) {return status >= 200 && status < 300; },

默认配置可以设置全局默认配置，是为了避免多种重复配置在不同请求中重复，比如baseURL、timeout等，这里设置baseURL。

默认配置 - 锐客网

文章图片

axios拦截器实质就是函数。
分为两种类型：

请求拦截器：用于拦截请求，自定义做一个逻辑后再把请求发送，可以用于配置公用的逻辑，就不用每个请求都配一遍。
响应拦截器：用于拦截响应，做一些处理后再出发响应回调。

axios拦截器 - 锐客网

效果：

文章图片

要理解这些个拦截器需要由一定的es6 Promise基础，出现上面效果的原因是，发送请求前，请求被请求拦截器拦截了，并且请求拦截器返回了一个非Promise实例的对象config，所以下一个拦截器是调用成功回调的，所以就打印响应拦截器成功，然后响应拦截器成功的回调返回的是非Promise实例的对象response，所以最终的请求回调是调用成功的回调，所以返回请求调用成功。
尝试以下再请求拦截器的成功回调中，返回reject状态的Promise。

文章图片

效果：

文章图片

出现上面效果的原因是，请求拦截器的成功回调中最后返回了reject状态的Promise实例对象，被判断为失败，到了回调链的下一回调，也就是响应拦截器的回调时，调用的时失败的回调，失败的回调中又返回了reject状态的Promise实例对象，所以到了真正请求的回调页调用了失败回调。
上面的效果与Promise如出一辙。
多个拦截器的效果：加了一个请求拦截器一个响应拦截器：