axios详解

文章目录

  • axios简介
  • axios特性
    • 1. 基于 Promise
    • 2. 浏览器和 Node.js 都支持
    • 3. 拦截请求和响应(axios鉴权)
    • 4. 自动转换 JSON 数据
    • 5. 转换请求和响应数据
    • 6. 取消请求
    • 7. 广泛的配置选项
    • 8. 客户端支持防止 CSRF/XSRF
    • 9. 支持 HTTP 授权
    • 10. 良好的错误处理
  • axios使用
    • 安装axios
    • 导入axios
    • 发起请求
  • axios封装
  • ajax与axios的区别

axios简介

Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能,为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。


axios特性

1. 基于 Promise

axios 的所有请求都返回一个 Promise 对象,这使得异步操作的处理更加直观和简洁。你可以使用 .then().catch() 方法来处理请求成功和失败的情况,或者使用 async/await 语法来编写更加清晰和易读的异步代码。

axios.post('https://api.example.com/submit', {  key1: 'value1',  key2: 'value2'  })  .then(function (response) {  console.log(response.data);  })  .catch(function (error) {  console.log(error);  });

.

2. 浏览器和 Node.js 都支持

axios 可以在浏览器环境中使用,也可以在 Node.js 中使用,这使得它在跨平台开发方面非常灵活。无论是在前端发送 API 请求,还是在后端与其他服务通信,axios 都能提供一致的体验。

axios可以用在浏览器和 node.js 中是因为,它会自动判断当前环境是什么,如果是浏览器,就会基于XMLHttpRequests实现axios。如果是node.js环境,就会基于node内置核心模块http实现axios

.

3. 拦截请求和响应(axios鉴权)

axios 允许你在请求发送到服务器之前或响应返回客户端之前拦截它们。这使得你可以轻松地在请求中添加通用的头信息、身份验证令牌,或者在响应到达之前进行一些预处理。

  • 拦截请求

    // 添加请求拦截器  
    axios.interceptors.request.use(function (config) {  // 在发送请求之前做些什么  // 例如,添加请求头  if (localStorage.getItem('token')) {  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;  }  return config;  
    }, function (error) {  // 对请求错误做些什么  return Promise.reject(error);  
    });
    

    在这个例子中,我们检查本地存储中是否存在一个 token,如果存在,我们将其添加到请求的 Authorization 头中。

  • 拦截响应

    // 添加响应拦截器  
    axios.interceptors.response.use(function (response) {  // 对响应数据做点什么  // 例如,根据状态码判断请求是否成功  if (response.status === 200) {  return response;  } else {  return Promise.reject(response);  }  
    }, function (error) {  // 对响应错误做点什么  if (error.response.status === 401) {  // 未授权,跳转到登录页面或执行其他操作  window.location.href = '/login';  return;  }  return Promise.reject(error);  
    });
    

    在这个例子中,我们检查响应的状态码。如果状态码是 200,我们返回响应;否则,我们拒绝这个 Promise。如果状态码是 401(未授权),我们重定向用户到登录页面。

  • 移除拦截器

    const myRequestInterceptor = axios.interceptors.request.use(function (config) {  // ...  
    });  // 当你想移除拦截器时  
    axios.interceptors.request.eject(myRequestInterceptor);
    

.

4. 自动转换 JSON 数据

axios 会自动将 JavaScript 对象序列化为 JSON 格式作为请求体,并自动将服务器返回的 JSON 数据解析为 JavaScript 对象。这使得处理 JSON 数据变得更加简单。

.

5. 转换请求和响应数据

你可以在请求发送到服务器之前和响应返回客户端之后,对请求和响应数据进行转换。例如,你可以自动将 JSON 数据转换为 JavaScript 对象,或者将响应数据转换为特定格式。

利用 transformRequesttransformResponse 提供的灵活的机制,允许根据具体需求对请求和响应数据进行自定义转换:

axios({  url: 'https://api.example.com/data',  method: 'post',  data: {  key1: 'value1',  key2: 'value2'  },  transformRequest: [function (data) {  // 在这里对请求数据进行转换  // 例如,你可能想要序列化数据为 JSON 字符串  return JSON.stringify(data);  }],  transformResponse: [function (data) {  // 在这里对响应数据进行转换  // 例如,你可能想要解析 JSON 字符串为 JavaScript 对象  return JSON.parse(data);  }]  headers: {  'Content-Type': 'application/json'  }  
})  
.then(function (response) {  console.log(response.data);  
})  
.catch(function (error) {  console.log(error);  
});

.

6. 取消请求

使用 axios 的 CancelToken,你可以方便地取消一个正在进行的请求。这在用户触发了一个新操作而前一个请求还未完成时非常有用,可以避免不必要的资源消耗。

let source = axios.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('主动取消请求');

在上面的代码中,我们创建了一个 CancelToken 的源,并使用了它的 token 来发起一个 GET 请求。如果之后我们需要取消这个请求,我们可以调用 source.cancel() 方法,并传递一个可选的字符串作为取消的原因。当请求被取消时,catch 块会捕获到错误,并且你可以使用 axios.isCancel() 方法来检查这个错误是否是因为请求被取消。

.

7. 广泛的配置选项

axios 的配置选项非常丰富,它们允许你自定义请求的行为。以下是一些常用的配置选项及其描述:

  • url:请求的地址,是必需的。

  • method:请求方法,如 ‘get’、‘post’、‘put’、‘delete’ 等。默认是 ‘get’。

  • baseURL:将自动加在 url 前面,除非 url 是一个绝对 URL。它便于为 axios 实例的方法传递相对 URL。

  • headers:自定义请求头。

  • params:即将与请求一起发送的 URL 参数。必须是一个纯对象或 URLSearchParams 对象。

  • data:作为请求主体被发送的数据。只适用于 ‘PUT’、‘POST’ 和 ‘PATCH’ 方法。当发送数据时,应该设置 Content-Type。

  • timeout:请求超时的毫秒数。如果请求花费的时间超过这个时间,请求将会被中断。

  • withCredentials:表示跨域请求时是否携带凭证(cookies, HTTP认证及客户端SSL证明等)。默认为 false。

  • responseType:服务器响应的数据类型,可以是 ‘arraybuffer’、‘blob’、‘document’、‘json’、‘text’、‘stream’。

  • transformRequest:允许你在请求数据发送到服务器之前对其进行修改。它只能用于 ‘PUT’、‘POST’ 和 ‘PATCH’ 这几个请求方法。数组中最后一个函数必须返回一个字符串、Buffer 实例、ArrayBuffer、FormData 或 Stream。

  • transformResponse:在响应数据传递到 then/catch 方法之前对其进行修改。

  • cancelToken:指定用于取消请求的 cancel token。

  • xsrfCookieName:用作 xsrf token 的值的 cookie 的名称。

  • xsrfHeaderName:携带 xsrf token 的值的 HTTP 头的名称。

  • onUploadProgress:处理上传进度的函数。

  • onDownloadProgress:处理下载进度的函数。

  • auth:表示应该使用 HTTP 基础认证,并提供用户名和密码。这将以 Authorization 头的形式发送。

  • validateStatus:定义对于给定的 HTTP 响应状态码是 resolve 还是 reject promise。

  • maxContentLength:定义允许的响应内容的最大字节。

  • httpAgent 和 httpsAgent:分别用于定义在 http 和 https 上用到的自定义代理。例如,在 node.js 环境中可以通过这些选项来设置 keepAlive。

对于重复使用的配置,建议设置为 axios 实例的默认配置,以减少代码冗余和提高可维护性:

axios.defaults.baseURL = 'https://api.example.com';  
axios.defaults.timeout = 1000;  
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

也可以在每次发起请求时单独指定,覆盖默认配置:

axios({  method: 'get',  url: '/user/12345',  timeout: 5000, // 覆盖默认超时设置  headers: { 'X-Custom-Header': 'foobar' } // 自定义请求头  
})  
.then(function (response) {})  
.catch(function (error) {});

.

8. 客户端支持防止 CSRF/XSRF

axios 默认会保护你的应用免受跨站请求伪造(CSRF)的攻击。它会检查服务器返回的响应头中的 XSRF-TOKEN,并自动将其添加到后续的请求头中。
以下是如何在客户端配置 axios 来支持防止 CSRF/XSRF 的步骤:

  1. 服务器端设置 CSRF token
    服务器需要在用户登录后设置一个包含 CSRF token 的 cookie。这个 cookie 通常命名为 XSRF-TOKEN 或其他自定义名称。
    Cookie xsrfTokenCookie = new Cookie("XSRF-TOKEN", csrfToken);

  2. 客户端读取 CSRF token
    在发送请求之前,客户端需要从 cookie 中读取 CSRF token。这通常通过 JavaScript 的 document.cookie 实现。

  3. 配置 axios 自动发送 CSRF token
    配置 axios 的 xsrfCookieNamexsrfHeaderName 选项,让 axios 自动从名为 XSRF-TOKEN 的 cookie 中读取 token,并将其添加到请求头 X-XSRF-TOKEN 中。下面是一个配置 axios 的示例:

    // 引入 axios  
    import axios from 'axios';  // 配置 axios 实例  
    const instance = axios.create({  // 其他配置...  xsrfCookieName: 'XSRF-TOKEN', // 默认就是 'XSRF-TOKEN'  xsrfHeaderName: 'X-XSRF-TOKEN' // 默认就是 'X-XSRF-TOKEN'  
    });  // 现在,当你使用 instance 发送请求时,axios 会自动从名为 'XSRF-TOKEN' 的 cookie 中  
    // 读取 CSRF token,并将其添加到请求头 'X-XSRF-TOKEN' 中。  
    instance.get('/some-endpoint')  .then(response => { })  .catch(error => { });
    

.

9. 支持 HTTP 授权

HTTP 授权头(通常指的是 Authorization 头)在 Axios 或其他 HTTP 客户端库中的主要作用是验证用户身份和授权访问资源。这是确保只有经过身份验证和授权的用户才能访问受保护的资源的机制

具体来说,Authorization 头通常包含访问令牌或密钥等凭证,这些凭证用于向服务器证明请求者的身份和权限。通过这种方式,服务器可以决定是否允许该请求者访问特定的资源或执行特定的操作。

HTTP 授权通常使用 BasicBearer 类型的授权。以下是两种类型的示例:

  • Basic 授权:
    Basic 授权通常用于发送用户名和密码,它们被编码为 Base64 格式。

    const axios = require('axios');  
    const Base64 = require('js-base64').Base64;  const username = 'your_username';  
    const password = 'your_password';  
    const credentials = `${username}:${password}`;  
    const encodedCredentials = Base64.encode(credentials);  axios({  method: 'get',  url: 'https://example.com/api/resource',  headers: {  'Authorization': `Basic ${encodedCredentials}`  }  
    })  
    .then(response => {  console.log(response.data);  
    })  
    .catch(error => {  console.error(error);  
    });
    
  • Bearer 授权
    Bearer 授权通常用于发送一个令牌(token),比如 JWT(JSON Web Tokens)。

    const axios = require('axios');  const token = 'your_bearer_token';  axios({  method: 'get',  url: 'https://example.com/api/resource',  headers: {  'Authorization': `Bearer ${token}`  }  
    })  
    .then(response => {  console.log(response.data);  
    })  
    .catch(error => {  console.error(error);  
    });
    

使用 Axios 拦截器设置默认授权头
通过使用 Axios 的拦截器功能,你可以为所有的请求自动添加 Authorization 头,从而避免了在每个请求中重复设置这个头的繁琐工作。这使得代码更加简洁和可维护。

const axios = require('axios');  const token = 'your_bearer_token'; // 或者 Basic 编码后的凭证  // 添加请求拦截器  
axios.interceptors.request.use(config => {  // 在发送请求之前做些什么  if (token) {  // 确保每个请求都有Authorization头  config.headers.Authorization = `Bearer ${token}`; // 或者 `Basic ${encodedCredentials}`  }  return config;  
}, error => {  // 对请求错误做些什么  return Promise.reject(error);  
});  // 现在你可以正常发起请求,而不必在每个请求中都设置 Authorization 头  
axios.get('https://example.com/api/resource')  .then(response => {  console.log(response.data);  })  .catch(error => {  console.error(error);  });

.

10. 良好的错误处理

Axios 的错误处理机制相当灵活和强大,允许开发者根据需要对不同类型的错误进行定制化的处理。以下是 Axios 错误处理的主要方式和特点:

  • 响应拦截器:Axios 允许你设置响应拦截器,在响应被 then 或 catch 处理前对其进行拦截。这样,你可以在拦截器中统一处理各种错误状态码,比如 400(请求参数错误)、401(身份验证失败)、409(资源不存在)、500(服务器内部错误)等。在拦截器中,你可以根据响应的状态码进行不同的处理,比如弹出警告、重定向到登录页面等。
  • 错误对象:当 Axios 请求发生错误时,它会返回一个错误对象。这个对象包含了有关错误的详细信息,比如请求的配置、响应数据(如果有的话)、请求状态等。你可以通过检查这个错误对象来获取更多关于错误的信息,并进行相应的处理。
  • 全局错误处理:除了在每个请求中单独处理错误外,你还可以设置全局的错误处理函数。这样,无论哪个请求发生错误,都会调用这个全局处理函数。这对于需要统一处理所有错误的情况非常有用,比如显示统一的错误提示信息或记录错误日志。
  • 取消请求:Axios 还支持取消请求的功能。当你需要取消一个正在进行的请求时,可以调用该请求的取消函数。取消请求会导致响应的 Promise 状态变为 rejected,从而触发错误处理机制。你可以在拦截器中处理取消请求的情况,比如清理相关资源或显示取消提示。

axios使用

安装axios

  • 使用npm:npm install axios
  • 使用yarn:yarn add axios
  • 使用bower:bower install axios
  • 使用cdn:在HTML文件中直接引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入axios

在JavaScript文件中,使用 import axios from './axios.js'; ;来导入axios。

发起请求

axios提供了多种请求方法,如get、post、put、delete等。下面以get请求为例:

axios.get('https://api.example.com/data')  .then(function (response) {  // 处理响应数据  console.log(response.data);  })  .catch(function (error) {  // 处理错误  console.log(error);  });

你也可以通过配置对象来发起请求,例如:

axios({  method: 'get',  url: 'https://api.example.com/data',  params: {  ID: 123  }  
})  
.then(function (response) {  console.log(response.data);  
})  
.catch(function (error) {  console.log(error);  
});

对于post、put等需要发送数据的请求,你可以在配置对象中提供data字段:

axios({  method: 'post',  url: 'https://api.example.com/data',  data: {  key1: 'value1',  key2: 'value2'  }  
})  
.then(function (response) {  console.log(response.data);  
})  
.catch(function (error) {  console.log(error);  
});

axios封装

vue中对axios的封装


ajax与axios的区别

简单通俗来讲ajax与axios的区别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/779141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt篇——Qt无法翻译tr()里面的字符串

最近遇到使用Qt语言家翻译功能时&#xff0c;ui界面中的中文都能够翻译成英文&#xff0c;但是tr("测试")这种动态设置给控件的中文&#xff0c;无法翻译&#xff08;lang_English.ts文件中的翻译已经正确添加了tr()字符串的翻译&#xff09;。 上网搜了很多资料&am…

Linux 常用命令(1)

&#x1f607;作者介绍&#xff1a;一个有梦想、有理想、有目标的&#xff0c;且渴望能够学有所成的追梦人。 &#x1f386;学习格言&#xff1a;不读书的人,思想就会停止。——狄德罗 ⛪️个人主页&#xff1a;进入博主主页 &#x1f5fc;专栏系列&#xff1a;Linux 随笔集合 …

【漏洞复现】通天星CMSV6 admin 弱口令漏洞(CVE-2024-29666)

0x01 产品简介 CMSV6平台是基于车辆位置信息服务和实时视频传输服务的创新技术和开放运营理念。为GPS运营商车辆硬件设备制造商、车队管理企业等车辆运营相关企业提供核心基础数据服务。 0x02 漏洞概述 CMSV6 7.31.0.2、7.32.0.3版本中存在弱密码漏洞&#xff0c;未授权的攻…

【Linux】图文详解Xshell远程连接服务器:以Amazon EC2 VPS为例

文章目录 问题描述解决方案Q&A 问题描述 本地cmd或powershell使用ssh -i “your.pem” user_nameip_address是可以登录Amazon EC2云服务器的。 然而&#xff0c;当使用XShell以SSH加载PEM文件方式登录亚马逊EC2云服务器&#xff0c;一直出现输入密码的问题&#xff0c;如…

Tomcat启动闪退是为什么?

Tomcat启动闪退是一种常见问题&#xff0c;它可能由多种原因引起。以下是一些常见的解决步骤方法&#xff1a; 检查内存分配&#xff1a; Tomcat启动失败可能是因为分配给它的Java虚拟机&#xff08;JVM&#xff09;内存不足。你需要检查并适当调整catalina.sh或catalina.bat启…

小狐狸JSON-RPC:wallet_addEthereumChain(添加指定链)

wallet_addethereumchain&#xff08;添加网络&#xff09; var res await window.ethereum.request({"method": "wallet_addEthereumChain","params": [{"chainId": "0x64", // 链 ID &#xff08;必填&#xff09;"…

THS-Location斜杠区别详解

1、location和proxy_pass都带/&#xff0c;则真实地址不带location匹配目录 location /api/ { proxy_pass http://127.0.0.1:8080/; } 访问地址&#xff1a;www.test.com/api/upload-->http://127.0.0.1:8080/upload 2、location不带/&#xff0c;proxy_pass带/&#xf…

前端-包管理器

文章目录 前端工程化包管理器NpmNpm常用命令 YarnYarn 常用命令 pnpmpnpm常用指令 依赖项npm 和 Yarn 的比较npm yarn pnpm 对比jsDelivr CDN 前端工程化包管理器 包管理器是一种工具&#xff0c;它帮助开发者管理项目中的库和依赖项&#xff0c;如安装、更新、配置和卸载。在…

JavaEE 初阶篇-深入了解多线程等待与多线程状态

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 线程等待 1.1 线程等待 - join() 方法 1.1.1 main 线程中等待多个线程 1.1.2 main 线程等待 t2 线程且t2 线程等待 t1 线程 1.1.3 其他线程阻塞等待 main 线程 1.…

Webpack常见插件和模式

目录 目录 目录认识 PluginCleanWebpackPluginHtmlWebpackPlugin自定义模版 DefinePlugin的介绍 ( 持续更新 )Mode 配置 认识 Plugin Loader是用于特定的模块类型进行转换&#xff1b; Plugin可以用于执行更加广泛的任务&#xff0c;比如打包优化、资源管理、环境变量注入等 …

基于ThinkPHP+Uniapp开发的房产管理系统

一款基于ThinkPHPUniapp开发的房产管理系统&#xff0c;支持小程序、H5、APP&#xff1b;包含房客、房东、经纪人三种身份。核心功能有&#xff1a;新盘销售、房屋租赁、地图找房、房源代理、在线签约、电子合同、客户CRM跟进、经纪人收益、分享佣金等 多终端 Uniapp开发&…

系统开发实训小组作业week5 —— 用例描述与分析

目录 4.3 UC003电影浏览与查询 4.3.1 用例描述 4.3.2 活动图 4.3.3 界面元素 4.3.4 功能 4.4 UC004在线订票 4.4.1 用例描述 4.4.2 活动图 4.4.3 界面元素 4.4.4 功能 4.3 UC003电影浏览与查询 4.3.1 用例描述 用例号 UC003-01 用例名称 电影浏览与查询 用例描述…

Spring Boot 统一数据返回格式 分析 和 处理

目录 实现统一数据格式 测试 原因分析 解决方案 &#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 实现统一数据格式 统⼀的数据返回格式使⽤ ControllerAdvice 和 Response…

linux 常用命令整理

ps aux &#xff1a; 打印出所有进程 可以通过 man ps 查看ps的说明。 ps是最基本也是最强大的进程查看命令 aux都是参数 a show processes for all users 显示所有用户的进程 u display the processs user/owner 显示用户 x also show processes not attached to a term…

LeetCode 1248. 统计「优美子数组」

解题思路 这道题我们需要稍微转化一下思路&#xff0c;s[j]s[i-1]k,将s[j]的出现次数存储到数据中。 相关代码 class Solution {public int numberOfSubarrays(int[] nums, int k) {int a[] new int[nums.length1];for(int i1;i<nums.length;i) a[i]nums[i-1];//s[i]表示…

基于Python微博舆情数据爬虫可视化分析系统(NLP情感分析+爬虫+机器学习)

这里写目录标题 基于Python微博舆情数据爬虫可视化分析系统(NLP情感分析爬虫机器学习)一、项目概述二、微博热词统计析三、微博文章分析四、微博评论分析五、微博舆情分析六、项目展示七、结语 基于Python微博舆情数据爬虫可视化分析系统(NLP情感分析爬虫机器学习) 一、项目概…

【C++】vector模拟实现

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. vector源码3. 构造、赋值和析构3.1 无参构造3.2 拷贝构造3.3 迭代器区间构造3.4 赋值3.5 析构 4. Capacity4.1 size4.2 capacity4.3 empty4.4 resize4.5 reserve 5. 下标访问和迭代器6. 输出7. Modifiers7.…

C# 操作 Word 全域查找且替换(含图片对象)

目录 关于全域查找且替换 Word应用样本 SqlServer数据表部分设计样本 范例运行环境 配置Office DCOM 设计实现 组件库引入 实现原理 查找且替换的核心代码 窗格内容 页眉内容 页脚内容 形状内容 小结 关于全域查找且替换 C#全域操作 Word 查找且替换主要包括如下…

平台不是问题,音乐集中播放:Listen 1

Listen 1&#xff1a;跨越平台&#xff0c;畅享音乐。让万千歌曲一键集中播放&#xff0c;让好音乐无界聆听。- 精选真开源&#xff0c;释放新价值。 概览 不论你日常倾向于哪一款在线音乐服务&#xff0c;无论是网X云音乐&#xff0c;QX音乐抑或是虾X音乐&#xff0c;恐怕最令…

【Java】ArrayList数组的扩容机制 jdk1.8

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 ArrayList和普通数组不同&#xff0c;ArrayList支持动态扩容&#xff0c;那么ArrayList到底是如何扩容的呢&#xff1f;你又是否知道ArrayList数组的初始长度是多少呢&#xff1f; 在开始介绍之前&#xff0c;我们要先介…