第十篇 Axios最佳实战：前端HTTP通信的王者之选

深入浅出HTTP请求前后端交互系列专题
第一章 引言-HTTP协议基础概念和前后端分离架构请求交互概述
第二章 HTTP请求方法、状态码详解与缓存机制解析
第三章 前端发起HTTP请求
第四章 前后端数据交换格式详解
第五章 跨域资源共享（CORS）：现代Web开发中的关键机制
第六篇 提升网页性能：深入解析HTTP请求优化策略（一）
第七篇 提升网页性能：深入解析HTTP请求优化策略（二）
第八篇 提升网页性能：深入解析HTTP请求优化策略（三）
第九篇 API设计原则与最佳实践
第十篇 Axios最佳实战：前端HTTP通信的王者之选
第十一篇 前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3

文章目录

Axios最佳实战：前端HTTP通信的王者之选

在现代Web开发中，前后端数据交互已经成为了一项基础且至关重要的技能。而在众多可选的HTTP通信库中，Axios凭借其强大的功能、灵活的配置以及良好的用户体验，已经逐渐成为了前端开发者们的首选。本篇博客将围绕Axios的最佳实践进行深入探讨，帮助你更好地掌握这个强大的库，提升你的开发效率。

1. 揭开Axios的神秘面纱

1.1 Axios是何方神圣？

Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js中。它提供了一个简洁的API来处理XMLHttpRequests和HTTP请求。Axios相比于其他HTTP库的优势在于其支持Promise API、能拦截请求和响应、转换请求和响应数据、取消请求等，同时还提供了客户端支持防止CSRF等安全特性。

1.2 Axios的核心特性

Axios的核心特性包括：

  • 基于Promise的链式调用，支持async/await语法；
  • 拦截请求和响应，方便进行统一处理；
  • 转换请求和响应数据，轻松实现数据格式的转换；
  • 支持取消请求，提高用户体验；
  • 客户端支持防止CSRF等安全特性；
  • 提供了API用于处理并发请求。

2. 快速上手Axios

2.1 安装Axios

使用npm或yarn等包管理工具可以轻松安装Axios：

npm install axios
# or
yarn add axios
  • 1
  • 2
  • 3

2.2 配置Axios

在安装完Axios后，我们可以通过全局默认设置或创建实例来配置Axios。全局默认设置适用于大部分请求，而创建实例则允许我们对特定请求进行更精细的配置。

// 设置全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;

// 创建实例并配置
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3. Axios基础使用指南

3.1 轻松发起GET请求

使用Axios发起GET请求非常简单，只需调用axios.get方法并传入URL即可：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.2 发送POST请求

发送POST请求同样简单，可以使用axios.post方法，并传入URL和需要发送的数据：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3.3 探索其他HTTP方法

除了GET和POST，Axios还支持PUT、DELETE等其他HTTP方法，使用方法类似：

axios.put('/user/12345', { firstName: 'NewName' })
  .then(function (response) {
    console.log(response.data);
  });

axios.delete('/user/12345')
  .then(function (response) {
    console.log(response.data);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

4. 深入挖掘Axios的高级特性

4.1 请求与响应的拦截器

Axios提供了请求拦截器和响应拦截器，允许我们在请求发送前或响应返回后进行预处理：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

4.2 取消不必要的请求

在某些场景下，我们可能需要取消正在进行的请求，Axios提供了CancelToken来实现这一功能：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（请求原因是可选的）
source.cancel('Operation canceled by the user.');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

4.3 错误处理的艺术

在Axios中，我们可以使用.catch方法来捕获请求过程中发生的错误，并进行相应的处理：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log(error.request);
    } else {
      // 发送请求时发生了其他错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.4 并发请求的处理

当我们需要同时发起多个请求，并等待所有请求都完成时，可以使用axios.all方法：

axios.all([
  axios.get('/user/12345'),
  axios.get('/user/67890')
])
.then(axios.spread(function (user12345, user67890) {
  // 两个请求现在都完成了
}));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

5. Axios与Vue.js的完美结合

5.1 在Vue.js中使用Axios

在Vue.js项目中使用Axios非常简单，只需在项目中安装Axios，然后在需要的地方引入并使用即可。通常，我们会将Axios实例挂载到Vue的原型上，这样在任何组件中都可以通过this.axios来访问Axios实例：

import axios from 'axios';

Vue.prototype.$axios = axios;

// 在Vue组件中发起请求
this.$axios.get('/user/12345')
  .then(response => {
    console.log(response.data);
  });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.2 响应式数据与视图更新

结合Vue.js的响应式特性，我们可以轻松地将Axios获取的数据与视图绑定，实现数据的自动更新：

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.$axios.get('/user/12345')
      .then(response => {
        this.userInfo = response.data;
      });
  }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在模板中，我们可以直接使用userInfo来渲染数据：

<template>
  <div>
    <h1>{{ userInfo.name }}h1>
    <p>{{ userInfo.email }}p>
  div>
template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

5.3 活用策略模式封装axios请求，拦截器等

  1. 简单封装axios发送get，post，put等各种请求，让请求体验保持一致。
    本质上除了get请求，其他请求都是post请求，所以单独处理下get请求，其他请求跟axios保持一致就可以：
import axios from "axios";
import { ElMessage } from 'element-plus'
//配置默认值
axios.defaults.baseURL = 'http://172.16.3.37:7001/api';
axios.defaults.timeout = 7000;

const request = {
    //创建一个用来发请求工厂
    /**
     * 一次请求
     * @param url    请求地址
     * @param type   method
     * @param data   参数 get请求时必须是 plain object
     * @returns {Promise}
     */
    one({url, type = 'get', data = {}}) {
        return new Promise((resolve, reject) => {
            if (type.toLowerCase() == "get") {
                axios.get(url, {params: data}).then(res => {
                    resolve(res.data)
                }).catch(e => {
                    ElMessage.error('操作失败')
                    reject(e)
                })
            } else {
                axios[type.toLowerCase()](url, {data: data}).then(res => {
                    resolve(res.data)
                }).catch(e => {
                    ElMessage.error('操作失败')
                    reject(e)
                })
            }
        })
    },
    /**
     * 循环请求完成后执行某项操作
     * @param arr 数组
     * @returns {Promise}
     */
    multiple(arr) {
        let parr = [];
        arr.forEach(async item => {
            parr.push(await this.one(item))
        })
        return new Promise((resolve, reject) => {
            Promise.all(parr).then(res => {
                resolve(res)
            }).catch(e => {
                reject(e)
            })
        })
    }
}
export default request
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  1. axios拦截器
/**
 * 可执行的策略
 * @type {{HEADER: (function(*): *)}}
 */
const strategyMap = {
    'HEADER': (config) => {
        let configTemp = config
        // 给请求头加些什么
        if (true) {
          configTemp.headers = {
                'X-API-ACCOUNT-KEY': 'KEY',
                'Authorization': 'AUTHORIZATION',
            }
        }
        return configTemp
    },
}
/**
 * 执行config策略
 * @param config
 * @param {[string]} strategies
 * @returns {*} config
 */
import {merge} from "lodash-es"
export const executeStrategies = (config, strategies) => {
    let configTemp = config
    // 请求拦截器是对config做进一步处理
    // 合并所有
    for (let i = 0; i < strategies.length; i++) {
        if (strategyMap[strategies[i]]) {
            configTemp = merge(configTemp, strategyMap[strategies[i]](config))
        }
    }
    return configTemp
}
export const requestInterceptor = {
    onFulfilled: function (config) {
        // 在发送请求之前做些什么
        // 执行HEADER策略
        return executeStrategies(config, ['HEADER',]);
    },
    onRejected: function (err) {
        // 对请求错误做些什么
        return Promise.reject(err);
    }
}
// 使用拦截器
axios.interceptors.request.use(requestInterceptor.onFulfilled, requestInterceptor.onRejected)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

6. 守护Axios的安全与性能

6.1 安全性考虑

在使用Axios时，我们需要注意一些安全性问题，如防止CSRF攻击。幸运的是，Axios库已经为我们考虑了这些问题，并提供了相应的解决方案。默认情况下，Axios会自动携带同源cookie，如果需要跨域携带cookie，我们需要设置withCredentials为true：

axios.defaults.withCredentials = true;
  • 1

同时，我们还需要在服务器端进行相应的配置，允许跨域携带cookie。

6.2 性能优化建议

为了提升Axios的性能，我们可以考虑以下建议：

  • 合理设置请求的超时时间，避免长时间等待；
  • 根据实际需求选择合适的数据传输格式，如JSON、FormData等；
  • 利用HTTP/2的多路复用和头部压缩等特性来提升性能；
  • 对返回的数据进行缓存处理，避免重复请求；
  • 使用CDN加速静态资源的加载。
注：本文转载自blog.csdn.net的极客岛的文章"https://blog.csdn.net/qq_32594913/article/details/131445132"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！