《Axios官方教程》

Axios介绍
1、Axios是什么？
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
2、Axios特性
（1）支持Promise API
（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
（4）取消请求
（5）自动转换JSON数据
（6）客户端支持防御XSRF
3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8以上

本文以通俗易懂的文字，力争让每一位想要学习Axios的童鞋都能轻松掌握该门技能

• 第一章 Axios基础
• 1.1 Axios概念及安装
• Axios 是什么? Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 特性 （1）支持
• 1.2 Axios中Get请求
• 本文以vue为例，介绍axios的基本用法。第一步.先用npm安装axios npm install axios --save第二步：引入axios import axios from "axios&q
• 1.3 Axios中的Post请求
• post请求常用的数据请求格式有两种： 1.form-data（常用于表单提交（图片上传、文件上传）） let data = {id: 12 }; let formData = new FormData(); for(let key in data){ formData.append(key,data[key]) } console.log(formData) axios.post(&#
• 1.4 Put请求和Patch请求
• put请求的主要用途：更新数据（所有数据推送到服务端）put请求用法：let data = { id: 12 }; axios.put("/User/UpdateUser", data).then(res=>{ console.log(res, 'put'
• 1.5 Axios中的Delete请求
• 方式一：params axios.delete("/data.json", { params: { id: 12}}).then(res => { console.log(res, "delete");}); let params = { id: 12
• 1.6 并发请求
• 并发请求，就是同时进行多个请求，并统一处理返回值。类似promise.all。在下面例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下： // 并发请求 axios.all([axios.get("/data.json&qu
• 第二章 Axios实例
• 2.1 Axios实例的创建
• 1、axios实例的创建 比如：后端接口地址有多个（http://www.duidaima.com、http://www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的
• 2.2 Axios实例的相关配置
• （1）配置列表 baseURL：请求的域名（基本地址）。 timeout：请求的超时时长，超出后后端返回401。 备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。 url：请求路径。 method：请求方法。如：get、po
• 2.3 常用参数配置的使用方法
• 举例1： let instance1 = axios.create({ baseURL:'http://localhost:9090',timeout:1000})instance1.get("/contactList",{ params:{ id:10}}).then(re
• 第三章 Axios拦截器、错误处理与取消请求
• 3.1 拦截器
• 1、拦截器 什么是拦截器？ 在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器。拦截器的使用方法 请求拦截器 // 请求拦截器 axios.interceptors.request.use(config => { // 在发送请求前做些什么return con
• 3.2 错误处理，拦截
• 结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行catch方法。 // 请求拦截器axios.interceptors.request.use(config => { // 在发送请求前做些什么return config;},err =&gt
• 3.3 取消请求（不常用）
• let source = axios.CancelToken.source(); axios.get("/data.json", { cancelToken: source.token}
• 第四章 Axios请求的封装与使用
• 思路分析 axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。第一步：新建 src/service/contactApi.js 文件const CONTACT_API = { // 获取联系人列表 getContactList:{
• 4.1思路分析
• 思路分析 axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。第一步：新建 src/service/contactApi.js 文件 const
• 4.2 设置请求拦截器与响应拦截器
• 设置请求拦截器与响应拦截器 拦截器的添加 请求拦截器 instance.interceptors.request.use(config => { // 发起请求前做些什么Toast.loading({ mask: false,duration: 0, // 一直存在forbidClick: true, // 禁止点
• 4.3 总结
• 在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。
• 第五章 Axios API
• 5.1 Axios API
• 可以向 axios 传递相关配置来创建请求 axios(config) 发起一个post请求 axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintst
• 5.2 Axios 实例
• 创建一个实例 您可以使用自定义配置新建一个实例。 axios.create([config]) const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'} })
• 5.3 请求配置
• 这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。 {// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // 默认值// `baseURL` 将自动加在 `url` 前
• 5.4 响应结构
• 一个请求的响应包含以下信息。 {// `data` 由服务器提供的响应data: {},// `status` 来自服务器响应的 HTTP 状态码status: 200,// `statusText` 来自服务器响应的
• 5.5 默认配置
• 您可以指定默认配置，它将作用于每个请求。 全局 axios 默认值 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common
• 5.6 拦截器
• 在请求或响应被 then 或 catch 处理前拦截它们。 添加请求拦截器 axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function
• 5.7 错误处理
• axios.get('/user/12345').catch(function (error) {if (error.response) {// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围console.log(error.response.data);console.log(error.r
• 5.8 取消请求
• AbortController 从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求： const controller = new AbortController();axios.get('/foo/bar', {signal: controller
• 5.9 请求体编码
• 默认情况下，axios将 JavaScript 对象序列化为 JSON 。 要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。浏览器 在浏览器中，可以使用URLS
• 5.10 注意事项
• 语义化 在axios达到 1.0 版本之前，破坏性更改将以新的次要版本发布。 例如 0.5.1 和 0.5.4 将具有相同的 API，但 0.6.0 将具有重大变化。Promises axios 依赖原生的ES6 Promise实现而被支持。 如果你的环境不支持