第十篇 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加速静态资源的加载。

相关文章
|
30天前
|
存储 前端开发 JavaScript
第六章(原理篇) 微前端间的通信机制
第六章(原理篇) 微前端间的通信机制
|
8天前
|
API Python
Python HTTP请求库对比,以实战请求豆瓣排行榜为例
对比了Python的几个HTTP请求库,包括`requests`、`http.client`、`aiohttp`、`urllib`、`httpx`、`treq`和`requests-toolbelt`,各有特点和优缺点。选择时应考虑项目需求(如异步支持)、易用性、社区支持、性能和兼容性。示例展示了如何使用`requests`和`aiohttp`库发送豆瓣电影排行榜的GET请求。
8 0
|
12天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
18 2
|
16天前
|
JavaScript 前端开发 API
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
|
30天前
|
资源调度 前端开发 JavaScript
用 Axios 提升前端异步请求的效率
用 Axios 提升前端异步请求的效率
|
30天前
|
JSON 前端开发 JavaScript
第三章 前端发起HTTP请求
第三章 前端发起HTTP请求
|
1月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
112 0
|
29天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
48 1
|
1月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
13 0