快速上手Axios:前端开发者必备技能

一、什么是Axios?

Axios是一个简单的HTTP客户端,通过它可以轻松发送异步请求。它在捕获响应数据、错误处理、请求拦截、取消请求等方面简化了许多复杂的细节。

二、安装Axios

1. 使用npm或yarn安装

bash 复制代码
# 使用npm
npm install axios

# 使用yarn
yarn add axios

三、发送你的第一次请求

1. 发起GET请求

javascript 复制代码
// GET请求的基本形式
const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

2. 发起POST请求

javascript 复制代码
// 使用POST请求发送数据
const axios = require('axios');

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Axios入门',
    body: '学习如何使用Axios',
    userId: 1
})
    .then(response => {
        console.log('数据提交成功:', response.data);
    })
    .catch(error => {
        console.error('提交失败:', error);
    });

四、请求配置

Axios允许进行多种配置,以满足不同请求的需求。

javascript 复制代码
// 发送具有配置的请求
const axios = require('axios');

axios({
    method: 'get',
    url: 'https://jsonplaceholder.typicode.com/posts',
    params: { userId: 1 }, // 查询参数
    timeout: 5000, // 请求超时设置为5秒
    headers: { 'X-Custom-Header': 'foobar' } // 设置请求头
})
    .then(response => {
        console.log('配置请求成功:', response.data);
    });

五、拦截器的使用

Axios提供了拦截器功能,能在请求或响应被then或catch处理前拦截它们,进行统一的操作。

1. 请求拦截器

javascript 复制代码
const axios = require('axios');

axios.interceptors.request.use(config => {
    // 在请求被发送之前做处理
    config.headers.Authorization = 'Bearer YOUR_TOKEN_HERE';
    console.log('请求拦截成功:', config);
    return config;
}, error => {
    return Promise.reject(error);
});

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

2. 响应拦截器

javascript 复制代码
const axios = require('axios');

axios.interceptors.response.use(response => {
    // 对响应数据进行处理
    console.log('响应拦截成功:', response);
    return response;
}, error => {
    // 对响应错误进行处理
    console.error('响应错误:', error.response);
    return Promise.reject(error);
});

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

六、并发请求处理

通过axios.all可以同时发送多个请求,并在所有请求都完成后执行某个回调函数。

javascript 复制代码
const axios = require('axios');
const requestOne = axios.get('https://jsonplaceholder.typicode.com/posts');
const requestTwo = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([requestOne, requestTwo])
    .then(axios.spread((posts, users) => {
        console.log('POST数据:', posts.data);
        console.log('USER数据:', users.data);
    }));

七、取消请求

javascript 复制代码
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/posts', {
    cancelToken: source.token
})
    .catch(thrown => {
        if (axios.isCancel(thrown)) {
            console.log('请求已被取消:', thrown.message);
        }
    });

// 取消请求时
source.cancel('用户手动取消请求');

结语

如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货。

相关推荐
香蕉可乐荷包蛋1 小时前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
格调UI成品1 小时前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip1 小时前
微前端框架选型
前端·javascript
芒果1251 小时前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~2 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰2 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清2 小时前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu2 小时前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏2 小时前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾2 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端