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企服之家，中国第一个企服评测及商务社交产业平台。