ToB企服应用市场:ToB评测及商务社交产业平台

标题: Ajax异步请求 axios [打印本页]
作者: 王海鱼    时间: 2025-2-16 15:50
标题: Ajax异步请求 axios
Ajax异步请求 axios

Axios 是一个基于 Promise 的 HTTP 客户端，实用于欣赏器和 node.js。它提供了从欣赏器中创建 XMLHttpRequests 和从 node.js 创建 http 请求的简洁 API。由于 Axios 利用了 Promise API，你可以利用 async/await 或 .then()/.catch()` 方法来处理异步请求。
安装 Axios

假如你在利用 npm 或 yarn，可以通过以下下令安装 Axios：
  1. npm install axios  
  2. # 或者  
  3. yarn add axios
复制代码
利用 Axios 发送 GET 请求

  1. // 引入 axios  
  2. const axios = require('axios');  
  3.   
  4. // 发送 GET 请求  
  5. axios.get('https://api.example.com/data')  
  6.   .then(function (response) {  
  7.     // 处理成功情况  
  8.     console.log(response);  
  9.   })  
  10.   .catch(function (error) {  
  11.     // 处理错误情况  
  12.     console.log(error);  
  13.   })  
  14.   .then(function () {  
  15.     // 总是会执行  
  16.   });  
  17.   
  18. // 使用 async/await  
  19. async function fetchData() {  
  20.   try {  
  21.     const response = await axios.get('https://api.example.com/data');  
  22.     console.log(response.data);  
  23.   } catch (error) {  
  24.     console.error(error);  
  25.   }  
  26. }  
  27.   
  28. fetchData();
复制代码
利用 Axios 发送 POST 请求

  1. // 发送 POST 请求  
  2. axios.post('https://api.example.com/users', {  
  3.     firstName: 'Fred',  
  4.     lastName: 'Flintstone'  
  5.   })  
  6.   .then(function (response) {  
  7.     console.log(response);  
  8.   })  
  9.   .catch(function (error) {  
  10.     console.log(error);  
  11.   });  
  12.   
  13. // 使用 async/await  
  14. async function createUser() {  
  15.   try {  
  16.     const response = await axios.post('https://api.example.com/users', {  
  17.       firstName: 'Fred',  
  18.       lastName: 'Flintstone'  
  19.     });  
  20.     console.log(response.data);  
  21.   } catch (error) {  
  22.     console.error(error);  
  23.   }  
  24. }  
  25.   
  26. createUser();
复制代码
配置请求

Axios 允许你配置请求，好比设置请求头（headers）、超时时间（timeout）等。
  1. axios.get('https://api.example.com/data', {  
  2.   params: {  
  3.     ID: 12345  
  4.   },  
  5.   timeout: 1000,  
  6.   headers: {'X-Custom-Header': 'foobar'}  
  7. })  
  8. .then(function (response) {  
  9.   console.log(response.data);  
  10. })  
  11. .catch(function (error) {  
  12.   if (error.response) {  
  13.     // 请求已发出，但服务器响应的状态码不在 2xx 的范围内  
  14.     console.log(error.response.data);  
  15.     console.log(error.response.status);  
  16.     console.log(error.response.headers);  
  17.   } else if (error.request) {  
  18.     // 请求已经发起，但没有收到响应  
  19.     console.log(error.request);  
  20.   } else {  
  21.     // 设置请求时触发的错误  
  22.     console.log('Error', error.message);  
  23.   }  
  24.   console.log(error.config);  
  25. });
复制代码
拦截请求和响应

Axios 允许你在请求或响应被 then 或 catch 处理前拦截它们。
  1. // 添加请求拦截器  
  2. axios.interceptors.request.use(function (config) {  
  3.     // 在发送请求之前做些什么  
  4.     return config;  
  5.   }, function (error) {  
  6.     // 对请求错误做些什么  
  7.     return Promise.reject(error);  
  8.   });  
  9.   
  10. // 添加响应拦截器  
  11. axios.interceptors.response.use(function (response) {  
  12.     // 对响应数据做点什么  
  13.     return response;  
  14.   }, function (error) {  
  15.     // 对响应错误做点什么  
  16.     return Promise.reject(error);  
  17.   });
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4