第十篇 Axios最佳实战：前端HTTP通信的王者之选-阿里云开发者社区

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

2024-05-16 280

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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'}
});

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);
  });

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);
  });

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);
  });

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);
});

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.');

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);
  });

4.4 并发请求的处理

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

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

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);
  });

5.2 响应式数据与视图更新

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

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.$axios.get('/user/12345')
      .then(response => {
        this.userInfo = response.data;
      });
  }
};

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

<template>
  <div>
    <h1>{{ userInfo.name }}</h1>
    <p>{{ userInfo.email }}</p>
  </div>
</template>

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

简单封装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<unknown>}
     */
    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<unknown>}
     */
    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

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)

6. 守护Axios的安全与性能

6.1 安全性考虑

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

axios.defaults.withCredentials = true;

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

6.2 性能优化建议

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

合理设置请求的超时时间，避免长时间等待；
根据实际需求选择合适的数据传输格式，如JSON、FormData等；
利用HTTP/2的多路复用和头部压缩等特性来提升性能；
对返回的数据进行缓存处理，避免重复请求；
使用CDN加速静态资源的加载。

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

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

1. 揭开Axios的神秘面纱

1.1 Axios是何方神圣？

1.2 Axios的核心特性

2. 快速上手Axios

2.1 安装Axios

2.2 配置Axios

3. Axios基础使用指南

3.1 轻松发起GET请求

3.2 发送POST请求

3.3 探索其他HTTP方法

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

4.1 请求与响应的拦截器

4.2 取消不必要的请求

4.3 错误处理的艺术

4.4 并发请求的处理

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

5.1 在Vue.js中使用Axios

5.2 响应式数据与视图更新

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

6. 守护Axios的安全与性能

6.1 安全性考虑

6.2 性能优化建议

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

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

1. 揭开Axios的神秘面纱

1.1 Axios是何方神圣？

1.2 Axios的核心特性

2. 快速上手Axios

2.1 安装Axios

2.2 配置Axios

3. Axios基础使用指南

3.1 轻松发起GET请求

3.2 发送POST请求

3.3 探索其他HTTP方法

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

4.1 请求与响应的拦截器

4.2 取消不必要的请求

4.3 错误处理的艺术

4.4 并发请求的处理

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

5.1 在Vue.js中使用Axios

5.2 响应式数据与视图更新

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

6. 守护Axios的安全与性能

6.1 安全性考虑

6.2 性能优化建议

热门文章

最新文章

相关课程

相关电子书

相关实验场景