• axios七大特性


    axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。它有许多优秀的特性,以下是其中七个主要特性及其详细代码示例:

    1. 基于 Promise

    axios 的所有请求都返回一个 Promise 对象,这使得异步操作变得非常直观和易于管理。

     
    
    1. axios.get('https://api.example.com/data')
    2. .then(response => {
    3. console.log(response.data);
    4. })
    5. .catch(error => {
    6. console.error(error);
    7. });

    2. 支持请求和响应拦截

    拦截器允许你在请求发送到服务器或响应返回到客户端之前对它们进行修改。

     
    
    1. // 请求拦截器
    2. axios.interceptors.request.use(
    3. config => {
    4. // 在发送请求之前做些什么
    5. return config;
    6. },
    7. error => {
    8. // 对请求错误做些什么
    9. return Promise.reject(error);
    10. }
    11. );
    12. // 响应拦截器
    13. axios.interceptors.response.use(
    14. response => {
    15. // 对响应数据做点什么
    16. return response;
    17. },
    18. error => {
    19. // 对响应错误做点什么
    20. return Promise.reject(error);
    21. }
    22. );

    3. 转换请求和响应数据

    你可以为请求和响应数据指定转换器。

     
    
    1. axios.defaults.transformRequest = [function (data) {
    2. // 对请求数据进行转换
    3. return JSON.stringify(data);
    4. }];
    5. axios.defaults.transformResponse = [function (data) {
    6. // 对响应数据进行转换
    7. return data;
    8. }];

    4. 取消请求

    使用 CancelToken 可以取消一个正在进行的请求。

     
    
    1. const CancelToken = axios.CancelToken;
    2. let source = CancelToken.source();
    3. axios.get('/user/12345', {
    4. cancelToken: source.token
    5. }).catch(function (thrown) {
    6. if (axios.isCancel(thrown)) {
    7. console.log('Request canceled', thrown.message);
    8. } else {
    9. // 处理错误
    10. }
    11. });
    12. // 取消请求 (请求原因是可选的)
    13. source.cancel('Operation canceled by the user.');

    5. 自动转换 JSON 数据

    axios 会自动将 JSON 数据转换为 JavaScript 对象。

     
    
    1. axios.get('https://api.example.com/data')
    2. .then(response => {
    3. // axios 会自动将 JSON 数据转换为 JavaScript 对象
    4. const data = response.data;
    5. console.log(data);
    6. });

    6. 客户端支持防御 XSRF

    axios 库支持库级别的 XSRF(跨站请求伪造)保护。

     
    
    1. // 当使用 withCredentials 时,axios 会自动设置 XSRF-TOKEN cookie
    2. axios.defaults.xsrfCookieName = 'XSRF-TOKEN'; // 默认值是:XSRF-TOKEN
    3. axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'; // 默认值是:X-XSRF-TOKEN

    7. 支持 HTTP 授权

    你可以通过配置对象的 auth 属性来自动设置 HTTP 授权头。

     
    
    1. axios({
    2. method: 'get',
    3. url: 'https://api.example.com/private',
    4. auth: {
    5. username: 'myusername',
    6. password: 'mypassword'
    7. }
    8. });

    在上述示例中,axios 会自动在请求头中添加 Authorization 字段,值为 Basic base64(username:password)

    请注意,axios 的特性和用法远不止这些,这些只是其中的一部分。要了解更多关于 axios 的信息,建议查阅其官方文档。

  • 相关阅读:
    Node的模块化管理
    猿创征文 | 云原生领域之容器日常使用工具推荐
    Vue3路由的使用
    ExtJS 数据处理-Associations(关联)
    C++ 读取txt文件,按行读取,每行按照空格分隔
    用Python写一个自动下载视频、弹幕、评论的软件(2022最新)
    极简二叉树
    C# Linq增强扩展MoreLinq之Acquire
    前后端分离Vue+node.js在线学习考试系统gqw7o
    unity笔记
  • 原文地址:https://blog.csdn.net/zhang20040217/article/details/139380814