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

简介: 第十篇 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请求,拦截器等

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

6. 守护Axios的安全与性能

6.1 安全性考虑

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

axios.defaults.withCredentials = true;

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

6.2 性能优化建议

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

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

相关文章
|
1天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
2天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
12天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
20天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
8天前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
9天前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
17 0
|
9天前
|
缓存 前端开发 安全
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
56 0
|
9天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
60 0
|
10天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
2月前
|
机器学习/深度学习 JSON API
HTTP协议实战演练场:Python requests库助你成为网络数据抓取大师
在数据驱动的时代,网络数据抓取对于数据分析、机器学习等至关重要。HTTP协议作为互联网通信的基石,其重要性不言而喻。Python的`requests`库凭借简洁的API和强大的功能,成为网络数据抓取的利器。本文将通过实战演练展示如何使用`requests`库进行数据抓取,包括发送GET/POST请求、处理JSON响应及添加自定义请求头等。首先,请确保已安装`requests`库,可通过`pip install requests`进行安装。接下来,我们将逐一介绍如何利用`requests`库探索网络世界,助你成为数据抓取大师。在实践过程中,务必遵守相关法律法规和网站使用条款,做到技术与道德并重。
44 2

热门文章

最新文章