一次性搞懂axios

有没有人和我一样以为axios官方文档读的一愣一愣的？颠末视频课程学习我们梳理一下axios的用法。下面我们话不多说，直接上代码示例：

1. // axios.html
3. <p sclass="my-p">
4. <script>
5. axios({
6.         // 请求类型
7.         method: 'GET',                // 不写默认为GET
8.         // URL
9.         url: 'http://xxxxx/yy'
10. }).then(response =>{
11.         console.log(result)
12.         // 将结果插入到p标签
13.         console.log(result.data.join('<br>'))                // A<br>B<br>C<br>D
14.         document.querySelector('my-p').innerHTML = result.data.join('<br>')               
15.         // ABCD每个字母换行输出
16. })
17. </script>

复制代码

该代码中，我们请求到了ABCD四个数据，并通过处理惩罚渲染到HTML页面上呈现换行输出的结果
axios介绍

界说：Axios 是一个基于 promise 网络请求库，作用于node.js 和欣赏器中
作用：

• 从欣赏器创建 XMLHttpRequests
  
• 从 node.js 创建 http 请求
  
• 支持 Promise API
  
• 拦截请求和响应
  
• 转换请求和响应数据
  
• 取消请求
  
• 超时处理惩罚
  
• 查询参数序列化支持嵌套项处理惩罚
  
• 自动将请求体序列化为：
  
• JSON (application/json)
  
• Multipart / FormData (multipart/form-data)
  
• URL encoded form (application/x-www-form-urlencoded)
  
• 将 HTML Form 转换成 JSON 举行请求
  
• 自动转换JSON数据
  
• 获取欣赏器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
  
• 为 node.js 设置带宽限制
  
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
  
• 客户端支持防御XSRF
  

安装：npm install axios 或 yarn add axios
为了直接使用 require 导入预构建的 CommonJS 模块（假如您的模块打包器无法自动解析它们），我们提供了以下预构建模块：

1. const axios = require('axios/dist/browser/axios.cjs'); // browser
2. const axios = require('axios/dist/node/axios.cjs'); // node

复制代码

接口文档

接口文档：描述接口的文章
接口：使用AJAX和服务器通讯时使用的URL、请求方法、参数

注意：axios会将data中的对象默认转成json格式的数据
URL

界说：统一资源定位符
组成：协议(http) + 域名(baidu.com) + 资源路径(api/xxx)
如：http://baidu.com/api/xxx
HTTP协议【超文本传输协议】

界说：规定了欣赏器发送及服务器返回内容的格式
HTTP报文的运动方向：一次HTTP请求，HTTP报文会从“客户端”流到“代理”再流到“服务器”，在服务器工作完成之后，报文又会从“服务器”流到“代理”再流到“客户端”。
请求报文

界说：欣赏器按照HTTP协议要求的格式，发送给服务器的内容

组成部分：

• 请求行：请求方法、URL、协议
  
• 请求头：以键值对的格式携带的附加信息，如：Content-Type（欣赏器携带的内容范例）
  
• 空行：分割请求头，空行之后是发送给服务器的资源
  
• 请求体：发送的资源，包含所有二进制数据和文本。
  

① 常见的请求方法
请求方法操作GET获取数据POST提交数据PUT修改数据（全部）DELETE删除数据PATCH修改数据（部分） ② 常见的请求头
Content-Type：内容的范例
常见范例寄义text/html用于欣赏器间响应x-www-form-urlencoded纯⽂本表单的提交⽅式multitype/form-data含有⼆进制⽂件时的提交⽅式application/jsonjson格式 Content-Length：指定 Body 的⻓度（字节）
Location：指定重定向的⽬标 URL
User-Agent：⽤户代理，便是谁发送或继承响应的，可以用来区分欣赏器发送的请求还是手机发送的请求。
错误排查

网络请求查看：F12 ———> Fetch/XHR：过滤监测请求方式
标头：请求行、请求头；载荷：请求体

发送登录验证出现错误，右键密码点击查抄，将type=password改为type=text，发现密码正确。查抄网络请求报文传输的数据，发现误将密码的值写成用户名的值

响应报文

界说：服务器按HTTP协议要求的格式，返回给欣赏器的内容

组成部分：

• 响应行：协议、HTTP响应状态码、状态信息
  
• 响应头：以键值对的格式携带的附加信息，如：Content-Type
  
• 空行：分割请求头，空行之后是发送给服务器的资源
  
• 响应体：返回的资源
  
  
  
  

① HTTP响应状态码：表明请求是否乐成
状态码说明1xx服务器收到请求，需要继续处理惩罚。如101表现服务器将关照客户端使用更高版本的HTTP协议2xx请求乐成。如200表现请求盼望的响应头或数据体将随此响应返回3xx重定向。如302表现暂时重定向，请求将包含一个新的URL地址，客户端将会对新地址举行GET请求4xx客户端错误。如404表现客户端请求资源不存在5xx服务器错误。如500表现服务器遇到意料外的环境，导致无法完成响应 URL 查询参数

界说：欣赏器提供给服务器的额外信息，让服务器返回欣赏器想要的数据
语法：http://xxxx.com/yyy?参数名1=值1&参数名2=值2

axios查询参数：params

1. // 目标资源地址?参数名1=值1&参数名2=值2
2. axios({
3.         url: '目标资源地址',
4.         params: {
5.                 参数名1: 值1,        // 属性名为后端定义，属性值为变量随便写
6.                 参数名2: 值2        // es5中若参数名与值相同则可简写为一个
7.         }
8. }).then(res => {
9.         // 数据处理
10. })

复制代码

axios设置

请求设置 Request Config

1. {
2.         url: '/user',
3.         method: 'get',
4.         baseURL: 'http://xxx.com/api/'        ,        // 默认地址
5.        
6.         // 处理发送请求的数据
7.         transformRequest: [function (data, headers) {       
8.             // Do whatever you want to transform the data
9.             return data;
10.           }],
11.          
12.           // 处理接收响应的数据
13.           transformResponse: [function (data) {               
14.             // Do whatever you want to transform the data
15.             return data;
16.           }],
17.          
18.           // 请求头
19.           headers: {'X-Requested-With': 'XMLHttpRequest'},
20.          
21.           // 查询参数 http://xxx.com/api/user?ID=1234
22.           params: {               
23.                 ID: 1234       
24.         },               
25.           data: 'Country=Brasil&City=Belo Horizonte',               
26.          
27.           // 延迟中断时间
28.           timeout: 1000,
29.          
30.           // 跨域请求时对cookie携带设置
31.           withCredentials: false, // 默认不携带
32.          
33.           // 对请求的适配器做设置【①AJAX ②nodejs的HTTP请求】
34.           adapter: function (config) {
35.             /* ... */
36.     }
37.    
38.     // 设置用户名密码。【使用较少】
39.     auth: {
40.                   username: 'janedoe',
41.                   password: 's00pers3cret'
42.         },
43.        
44.         // 设置响应体
45.         responseType: 'json',                // default
46.         // 设置响应结果编码字符集
47.          responseEncoding: 'utf8',                 // default
48.          // 设置跨域标识（安全设置，保证是自己的客户端而不是未知的，避免跨站攻击）
49.          xsrfCookieName: 'XSRF-TOKEN',                 // default
50.          xsrfHeaderName: 'X-XSRF-TOKEN',                 // default
51.          
52.          // 设置上传和下载时的回调
53.          onUploadProgress: function ({loaded, total, progress, bytes, estimated, rate, upload = true}) {
54.             // Do whatever you want with the Axios progress event
55.           },
56.          onDownloadProgress: function ({loaded, total, progress, bytes, estimated, rate, download = true}) {
57.             // Do whatever you want with the Axios progress event
58.           },
60.         // 设置HTTP响应体的最大尺寸        【字节】
61.         maxContentLength: 2000,
62.         // 设置HTTP请求体的最大尺寸        【字节】
63.         maxBodyLength: 2000,
65.         // 设置响应结果的成功的范围
66.         validateStatus: function (status) {
67.             return status >= 200 && status < 300;         // default
68.           },
69.           
70.          // 设置最大跳转次数【nodejs中使用】
71.          maxRedirects: 21,         // default
72.          // 重定向请求中添加认证或其他自定义行为
73.          beforeRedirect: (options, { headers }) => {
74.             if (options.hostname === "example.com") {
75.               options.auth = "user:password";
76.             }
77.           },
79.         // 向docker的守护进程发送请求
80.         // Only either `socketPath` or `proxy` can be specified.
81.         socketPath: null,                // default
83.         // nodejs代理配置
84.         proxy: {
85.             protocol: 'https',
86.             host: '127.0.0.1',
87.             // hostname: '127.0.0.1' // Takes precedence over 'host' if both are defined
88.                    port: 9000,
89.             auth: {
90.                       username: 'mikeymike',
91.                       password: 'rapunz3l'
92.                  }
93.         }
94.        
95.         // 取消Ajax请求
96.         cancelToken: new CancelToken(function (cancel) {}),
97. }

复制代码

响应结构 Response Config

1. {
2.   // `data` is the response that was provided by the server
3.   data: {},
5.   // `status` is the HTTP status code from the server response
6.   status: 200,
8.   // `statusText` is the HTTP status message from the server response
9.   statusText: 'OK',
11.   // `headers` the HTTP headers that the server responded with
12.   // All header names are lowercase and can be accessed using the bracket notation.
13.   // Example: `response.headers['content-type']`
14.   headers: {},
16.   // `config` is the config that was provided to `axios` for the request
17.   config: {},
19.   // `request` is the request that generated this response
20.   // It is the last ClientRequest instance in node.js (in redirects)
21.   // and an XMLHttpRequest instance in the browser
22.   request: {}
23. }

复制代码

代码示例

GET请求

1. axios({
2.         url：‘请求的网址’，
3.         method：'get',                // 可省略
4.         params: {                                // 查询参数
5.                 参数名1: 值1,        // 属性名为后端定义，属性值为变量随便写
6.                 参数名2: 值2        // es6中若参数名与值相同则可简写为一个
7.         }
8. }).then()

复制代码

POST请求

1. axios({
2.         url：‘请求的网址’，
3.         method：'post',
4.         data：{                // 提交数据
5.                 属性名1: '属性值1',
6.                 属性名2: '属性值2'
7.         }
8. }).then()

复制代码

axios错误处理惩罚

1. axios({
2.         // 请求选项
3. }).then(result => {
4.         // 处理数据
5. }).catch(error => {
6.         // 处理错误
7.         console.log(error)
8.         alert(error.data.xxx)                // 显示错误信息
9. })

复制代码

axios默认设置

默认请求范例axios.default.method = 'GET'
默认基础URLaxios.default.baseURL = 'http://localhost:3000'
默认请求参数axios.default..params = { id:100 }
axios自界说实例

1. const instance = axios.create({
2.   baseURL: 'https://api.example.com',
3.   timeout: 2000
4. });
5. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
7. // 用法一
8. instance({
9.         url: '/user',
10. }).then({})
12. // 用法二
13. instance.get('/user').then({})

复制代码

axios请求别名

axios.request(config)

1. axios.request({
2.         method: 'GET',
3.         url: 'URL'
4. }).then(response => {
5.         console.log(response)
6. })

复制代码

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

1. axios.post('URL',{
2.         // data请求体对象
3. }).then({})

复制代码

axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios拦截器

作用：在请求或响应被 then 或 catch 处理惩罚前拦截它们。
执行顺序：
①请求拦截器：发送请求前借助回调函数对参数和内容举行查抄和处理惩罚【代码后进先执行】
②响应拦截器：结果吸取之前举行查抄或预处理惩罚【代码后进后执行】
③最后再由用户自界说处理惩罚

1. // 设置请求拦截器
2. axios.interceptors.request.use(function (config) {
3.     // 在发送请求之前做些什么
4.     console.log('请求拦截器 成功')
5.     return config;
6.   }, function (error) {
7.     // 对请求错误做些什么
8.     console.log('请求拦截器 失败')
9.     return Promise.reject(error);
10.   });
12. // 设置响应拦截器
13. axios.interceptors.response.use(function (response) {
14.     // 2xx 范围内的状态码都会触发该函数。
15.     // 对响应数据做点什么
16.      console.log('响应拦截器 成功')
17.     return response;
18.   }, function (error) {
19.     // 超出 2xx 范围的状态码都会触发该函数。
20.     // 对响应错误做点什么
21.     console.log('响应拦截器 失败')
22.     return Promise.reject(error);
23.   });
25. // 发送请求
26. axios（{
27.         method: 'GET',
28.         url: 'http://localhost:3000/api'
29. }).then(response => {
30.         console.logI('自定义回调处理成功结果')
31. }).catch(error => {
32.         console.logI('自定义回调失败')
33. })

复制代码

axios取消请求

AbortController【v0.22.0 开始，Axios 支持以 fetch API 方式取消请求】

1. const controller = new AbortController();
3. axios.get('/foo/bar', {
4.    signal: controller.signal
5. }).then(function(response) {
6.    //...
7. });
8. // 取消请求
9. controller.abort()

复制代码

CancelToken【此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。】
方法1：使用 CancelToken.source 工厂方法创建一个 cancel token

1. const CancelToken = axios.CancelToken;
2. const source = CancelToken.source();
4. axios.get('/user/12345', {
5.   cancelToken: source.token
6. }).catch(function (thrown) {
7.   if (axios.isCancel(thrown)) {
8.     console.log('Request canceled', thrown.message);
9.   } else {
10.     // 处理错误
11.   }
12. });
14. axios.post('/user/12345', {
15.   name: 'new name'
16. }, {
17.   cancelToken: source.token
18. })
20. // 取消请求（message 参数是可选的）
21. source.cancel('Operation canceled by the user.');

复制代码

方法2：通过通报一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token。可通过cancel的值判定请求是否发送了

1. const CancelToken = axios.CancelToken;
2. // 2. 声明全局变量
3. let cancel = null;
5. // 检测上一次的请求是否已经完成
6. if(cancel !== null){    // 未完成
7.         // 取消上一次的请求
8.         cancel();
9. }
11. axios.get('/user/12345', {
12.         // 1. 添加配置对象的属性
13.    cancelToken: new CancelToken(function executor(c) {                // executor 函数接收一个 cancel 函数作为参数
14.     // 3. 将 c 的值赋给 cancel
15.     cancel = c;
16.   })
17. }).then(response => {
18.         console.log(response)
19.         // 将cancel的值初始化
20.         cancel = null
21. })
23. // 取消请求
24. cancel();

复制代码

上面代码实现的结果：在上一次消息未发送完成时，每次点击发送请求的按钮都会取消上一次的请求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。