Axios的根本使用

什么是axios？

Axios 是一个基于 Promise 的 JavaScript 库，用于在浏览器和 Node.js 环境中简化 HTTP 请求的发送和管理。它支持请求和响应拦截、自动 JSON 数据处理、取消请求等功能，是现代 Web 开发中的一个强大工具。
为什么使用axios？

其他常见的网络请求方法：

• XMLHttpRequest (XHR):
  
  
  
  • 优点
    兼容性好，险些全部浏览器都支持。
    提供了丰富的事件处理，可以处理进度、状态变化等。
    
  • 缺点
    API 较为复杂，使用起来不够简洁。
    不是基于 Promise 的，处理异步逻辑时可能需要编写回调函数。
    
  
  
• Fetch API:
  
  
  
  • 优点
    现代浏览器内置，使用 Promise，易于编写异步逻辑。
    提供了简洁的 API 计划。
    支持流式传输和并行请求。
    
  • 缺点
    较新的浏览器才支持，需要 polyfill 来兼容旧浏览器。
    默认不处理 JSON 转换，需要手动调用 .json() 方法。
    
  
  
• jQuery.ajax:
  
  
  
  • 优点
    语法简洁，易于使用。
    内置在 jQuery 库中，简化了 AJAX 请求的复杂性。
    
  • 缺点
    依赖 jQuery，假如项目中不使用 jQuery，则不推荐使用。
    随着现代浏览器内置 Fetch API 的遍及，使用场景逐渐减少。
    
  
  
• request:
  
  
  
  • 优点
    简洁的 API 计划。
    支持 Promise。
    
  • 缺点
    主要用于 Node.js 环境。
    社区支持和更新可能不如 Axios 活泼。
    
  
  

然而再看看Axios:

• 优点
  使用 Promise，使得请求的处理更加直观和简洁。
  支持 Node.js 和浏览器，跨平台兼容性。
  提供了丰富的配置选项和拦截器。
  拥有详尽的错误处理机制。
  自动转换 JSON 数据。
  支持请求取消和自动重试。
  拥有一个活泼的社区和丰富的插件生态。
  
• 缺点
  需要额外安装库，增长了项目依赖。
  

仅有的缺点就是要下载axios库，相比之下算是最能接受的一个缺点了。
如何使用axios？

下载axios

使用npm：

1. npm install axios

复制代码

使用yarn:

1. yarn add axios

复制代码

Axios 请求的两种途径

1、直接使用axios

（1） axios(config)

1. // 发起一个post请求
2. axios({
3.  method: 'post',
4.  url: '/user/12345',
5.  data: {
6.    firstName: 'Fred',
7.    lastName: 'Flintstone'
8.   }
9. });

复制代码

（2） axios.请求方式别名(...)

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]]
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])
注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
2、创建axios实例

一般存放在/src/utils/ request.js文件中，主要誊写axios的封装过程。例：

1. /****   request.js   ****/
2. // 导入axios
3. import axios from 'axios'
4. ​
5. //1. 创建新的axios实例，
6. const service = axios.create({
7.  //这里写请求配置，如
8.  //url(目标资源地址)
9.  //method(方法)
10.  //data(数据)
11.  //timeout(请求超时的毫秒数)
12.  //等等，详见后面的“请求配置”
13.  baseURL: 'https://api.example.com',
14.  timeout: 3000
15. })
16. ​
17. // 2.请求拦截器
18. service.interceptors.request.use(
19.  config => {
20.    //发请求前做的一些处理，如数据转化，配置请求头，设置token，设置时间戳等
21.    //数据转化
22.    config.data = JSON.stringify(config.data);
23.    //配置请求头
24.    config.headers = {'Content-Type':'application/x-www-form-urlencoded'};
25.    //添加认证令牌token
26.    const token = localStorage.getItem('token')
27.    if (token) {config.headers.Authorization = `Bearer ${token}`}
28.    //加个时间戳
29.    config.params = {
30.      ...config.params,
31.      t: new Date().getTime(),
32.    };
33.    return config;
34.   }, error => {
35.    console.log(error)
36.    Promise.reject(error)
37.   })
39. // 3.响应拦截器
40. service.interceptors.response.use(
41.  response => {
42.     //这里写接收到响应数据后的一些处理
43.     // 未设置状态码则默认成功状态
44.     const code = res.data.code || 200
45.     // 获取错误信息
46.     const msg = errorCode[code] || res.data.msg || errorCode['default']
47.     // 二进制数据则直接返回
48.     if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
49.       return res.data
50.     }
51.     // 当检测到请求状态码为401时，即未授权访问，触发以下逻辑
52.     if (code === 401) {
53.       //Relogin是重新登录的弹窗，开头要声明，这里只做演示
54.       if (!isRelogin.show) {
55.         isRelogin.show = true
56.         ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
57.          confirmButtonText: '重新登录',
58.          cancelButtonText: '取消',
59.          type: 'warning'
60.         })
61.          .then(() => {
62.            isRelogin.show = false
63.            useUserStore()
64.              .logOut()
65.              .then(() => {
66.                location.href = '/index'
67.              })
68.          })
69.          .catch(() => {
70.            isRelogin.show = false
71.          })
72.      }
73.      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
74.    } else if (code === 500) {
75.      ElMessage({ message: msg, type: 'error' })
76.      return Promise.reject(new Error(msg))
77.    } else if (code === 601) {
78.      ElMessage({ message: msg, type: 'warning' })
79.      return Promise.reject(new Error(msg))
80.    } else if (code !== 200) {
81.      ElNotification.error({ title: msg })
82.      return Promise.reject('error')
83.    } else {
84.      return Promise.resolve(res.data)
85.    }
86.     return response;
87.   }, error => {
88.     //这里做一些错误处理
89.     console.log('err' + error)
90.     let { message } = error
91.     if (message == 'Network Error') {
92.      message = '后端接口连接异常'
93.     } else if (message.includes('timeout')) {
94.      message = '系统接口请求超时'
95.     } else if (message.includes('Request failed with status code')) {
96.      message = '系统接口' + message.substr(message.length - 3) + '异常'
97.     }
98.     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
99.     return Promise.reject(error)
100. })
101. ​
102. //4.导出axios实例
103. export default service

复制代码

然后就可以在api文件夹下封装api接口，例：

1. /****   login.js   ****/
2. import request from '@/utils/request'
3. ​
4. // 登录方法
5. export function login(username, password, code, uuid) {
6.  const data = {
7.    username,
8.    password,
9.    code,
10.    uuid
11.   }
12.  return request({
13.    url: '/login',
14.    headers: {
15.      isToken: false,
16.      repeatSubmit: false
17.    },
18.    method: 'post',
19.    data: data
20.   })
21. }

复制代码

接着就可以在页面中直接导入封装好的方法，并进行使用
请求配置

创建请求时可以用的配置选项：
url 是用于请求的服务器 URL
method 是创建请求时使用的方法
baseURL 将自动加在 url 前面，除非 url是一个绝对 URL。​ 它可以通过设置一个 baseURL便于为 axios 实例的方法通报相对 URL
params 是与请求一起发送的 URL 参数

1. // 必须是一个简单对象或 URLSearchParams 对象
2.   params: {
3.    ID: 12345
4.   },

复制代码

data 是作为请求体被发送的数据

1.   // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
2.   data: {
3.    firstName: 'Fred'
4.   },

复制代码

timeout 指定请求超时的毫秒数。

1.   // 如果请求时间超过 `timeout` 的值，则请求会被中断
2.   timeout: 1000, // 默认值是 `0` (永不超时)  

复制代码

（以上只是常见的几种，别的详见axios官方文档）
响应结构

一个请求的响应包罗以下信息，可以在响应拦截器里进行处理。

1. {
2.  // `data` 由服务器提供的响应
3.  data: {},
4. ​
5.  // `status` 来自服务器响应的 HTTP 状态码
6.  status: 200,
7. ​
8.  // `statusText` 来自服务器响应的 HTTP 状态信息
9.  statusText: 'OK',
10. ​
11.  // `headers` 是服务器响应头
12.  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
13.  // 例如: `response.headers['content-type']`
14.  headers: {},
15. ​
16.  // `config` 是 `axios` 请求的配置信息
17.  config: {},
18. ​
19.  // `request` 是生成此响应的请求
20.  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
21.  // 在浏览器中则是 XMLHttpRequest 实例
22.  request: {}
23. }

复制代码

当使用 then 时，将吸收入下相应：

1. axios.get('/user/12345')
2.   .then(function (response) {
3.    console.log(response.data);
4.    console.log(response.status);
5.    console.log(response.statusText);
6.    console.log(response.headers);
7.    console.log(response.config);
8.   });

复制代码

默认配置

可以指定默认配置，它将作用于每个请求。
全局 axios 默认值

1. axios.defaults.baseURL = 'https://api.example.com';
2. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
3. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

复制代码

自定义实例默认值

1. // 创建实例时配置默认值
2. const instance = axios.create({
3.  baseURL: 'https://api.example.com'
4. });
5. ​
6. // 创建实例后修改默认值
7. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

复制代码

配置的优先级

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子。

1. // 使用库提供的默认配置创建实例
2. // 此时超时配置的默认值是 `0`
3. const instance = axios.create();
4. ​
5. // 重写库的超时默认值
6. // 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
7. instance.defaults.timeout = 2500;
8. ​
9. // 重写此请求的超时时间，因为该请求需要很长时间
10. instance.get('/longRequest', {
11.  timeout: 5000
12. });

复制代码

拦截器的根本样式

1. //添加请求拦截器
2. ​
3. axios.interceptors.request.use(
4.     config => {
5.         return config;
6.     },
7.     error => {
8.         return Promise.reject(error);
9.     }
10. );
11. ​
12. //添加响应拦截器
13. ​
14. axios.interceptors.response.use(
15.     response => {
16.      return response;
17.     },
18.     error => {
19.      return Promise.reject(error);
20.     }
21. );

复制代码

移除拦截器：

1. const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
2. axios.interceptors.request.eject(myInterceptor);

复制代码

给自定义的 axios 实例添加拦截器：

1. const instance = axios.create();
2. instance.interceptors.request.use(function () {/*...*/});

复制代码

错误处理

1. axios.get('/user/12345')
2.   .catch(error =>{
3.    if (error.response){
4.      console.log(error.response.data);
5.      console.log(error.response.status);
6.      console.log(error.response.headers);
7.    }else if(error.request){
8.      console.log(error.request);
9.    }else{
10.      console.log('Error', error.message);
11.    }
12.     console.log(error.config);
13. });

复制代码

使用 validateStatus 配置选项，可以自定义抛堕落误的 HTTP code。

1. axios.get('/user/12345', {
2.   validateStatus: function (status) {
3.    return status < 500; // 处理状态码小于500的情况
4.   }
5. })

复制代码

1. 使用 <strong>toJSON</strong> 可以获取更多关于HTTP错误的信息。

复制代码

1. axios.get('/user/12345')
2.   .catch(function (error) {
3.    console.log(error.toJSON());
4.   });

复制代码

取消请求

AbortController

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

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

复制代码

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