最新axios发起Ajax请求方法|小白一看就会的实战教程

我把最新的Axios用法拆成了“能直接跟着做”的步骤——从“怎么引入Axios”（CDN和npm两种方式都讲清），到最常用的GET请求（参数怎么拼、返回值怎么取），再到POST请求的“表单提交”“JSON数据”两种场景，甚至连新手最头疼的“错误处理”（比如请求超时、404怎么提示）、“请求拦截器”（怎么统一加token）都给了现成代码模板。

没有复杂概念，每一步都配“可直接运行”的示例：你复制代码，改改接口地址和参数，5分钟就能发起第一个有效请求。不管是个人项目的接口调用，还是职场里的日常需求，这篇教程能帮你跳过“踩坑期”，直接搞定Axios发起Ajax请求的所有基础操作，再也不用对着文档发呆啦！

你有没有过这种情况？刚学前端想做个小项目，查了一堆Axios教程，复制代码却总报错——要么参数没传过去，要么Content-Type不对，要么网络不好的时候页面一直转圈圈？我去年帮朋友做个人博客的时候，就因为Axios的问题卡了整整一天：他用CDN引Axios总失效，后来发现是链接没加https；发POST请求时把params写成data，结果接口收不到参数；网络超时没做处理，用户点了提交按钮就一直等，以为页面坏了……今天把我从0到1用Axios的经验整理出来，连踩过的坑都标好了，小白跟着做就能直接上手。

从0到1：Axios的基础使用（附我踩过的坑）

先明确一点：Axios是前端最常用的基于Promise的HTTP客户端（这是Axios官方文档https://axios-http.com/docs/intronofollow里的定义），比原生XMLHttpRequest简单10倍，比jQuery的$.ajax更符合现代前端的需求。不管你是做个人博客、小工具还是公司项目，学会Axios基本就能解决90%的接口请求问题。

第一步：先搞懂「怎么引入Axios」（别再用错链接了）

Axios的引入方式主要有两种：CDN（适合原生JS项目）和npm（适合Vue/React等框架项目）。我朋友当时就是用CDN踩了坑——他复制的链接是http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js，结果浏览器提示“不安全的内容”，请求直接被拦截。后来换成https开头的链接才好：

<!-
正确的CDN引入方式（带https） >

如果是用Vue/React项目，直接用npm安装：

npm install axios

然后在文件里导入：

import axios from 'axios';

这里要注意：如果你的项目是纯原生JS写的（比如一个简单的HTML页面），就别用npm了，老老实实用CDN——我之前帮邻居家小孩做的“成语查询工具”，他用npm装了Axios，结果浏览器报错“Cannot use import statement outside a module”，就是因为原生JS不支持import语法（除非加type="module"，但新手没必要搞这么复杂）。

第二步：GET请求怎么发？（我曾把params写成data，查了半小时）

GET请求是最常用的——比如获取文章列表、查询用户信息。小白最容易踩的坑是：把GET的参数写进data里（POST才用data！）。正确的写法是用params配置项，比如你要查ID为1的用户信息：

// 正确写法：用params传GET参数
axios.get('/api/user', {
 params: {
 id: 1 // 这个参数会拼在URL后面：/api/user?id=1
 }
})
.then(res => {
 console.log('用户信息：', res.data); // res.data是服务器返回的实际数据
})
.catch(err => {
 console.log('请求失败：', err);
});

我之前踩过的坑：把params写成了data，结果URL里没有id参数，接口返回“用户不存在”，我查了半小时控制台才发现——GET请求的参数只能用params，POST请求才用data！记不住的话，你可以想：GET是“获取”数据，参数要“挂在URL上”；POST是“提交”数据，参数要“放在请求体里”。

第三步：POST请求的两种场景（别再乱设Content-Type了）

POST请求比GET复杂一点，因为要区分表单数据和JSON数据——这俩的Content-Type（请求头里的内容类型）完全不一样，设错了接口根本收不到数据。我之前帮朋友做登录功能，他直接传了个对象当表单数据，结果接口返回“用户名或密码错误”，后来发现是Content-Type不对。

场景1：提交表单（比如登录、注册）

这种情况要用表单数据，对应的Content-Type是application/x-www-form-urlencoded。你可以用URLSearchParams来构造数据（不用额外装插件）：

// 提交登录表单（表单数据）
const formData = new URLSearchParams();
formData.append('username', 'admin'); // 用户名
formData.append('password', '123456'); // 密码
axios.post('/api/login', formData) // Axios会自动设置Content-Type为application/x-www-form-urlencoded
.then(res => {
 console.log('登录成功：', res.data);
})
.catch(err => {
 console.log('登录失败：', err);
});

场景2：提交JSON数据（比如发布文章、修改信息）

这种情况要用JSON对象，对应的Content-Type是application/json（这是Axios的默认值，不用手动设）：

// 发布文章（JSON数据）
const articleData = {
 title: '小白学Axios的正确姿势',
 content: '这篇文章帮我解决了好多坑…',
 author: '小明'
};
axios.post('/api/article', articleData) // 自动设置Content-Type为application/json
.then(res => {
 console.log('发布成功：', res.data);
})
.catch(err => {
 console.log('发布失败：', err);
});

我朋友当时的问题就是：提交登录表单时用了JSON数据，接口 expecting application/x-www-form-urlencoded 但收到application/json，所以直接拒绝了请求。记住：表单用URLSearchParams，JSON用普通对象，别搞反了！

附：我整理的Axios常用配置项表格（快速查表）

为了让你不用每次都翻文档，我把最常用的Axios配置项做成了表格，直接对照用就行：

小白必学的Axios进阶技巧（解决90%的实际问题）

学会基础使用还不够——实际项目里你会遇到“网络超时怎么办？”“每个请求都要加token好麻烦？”“返回数据要重复写res.data？”这些问题。我之前做公司项目的时候，就因为没学这些技巧，写了一堆重复代码，后来用了拦截器和错误处理，代码量直接少了三分之一。

技巧1：错误处理（别让用户盯着加载框发呆）

你有没有遇到过：用户点了提交按钮，网络突然断了，页面一直显示“加载中”，用户以为按钮坏了？我之前做项目就犯过这个错——没处理Axios的错误，结果用户投诉“页面卡住了”。正确的做法是：用try...catch或者.catch捕获错误，然后给用户明确的提示。

Axios的错误对象分三种情况（MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAXnofollow 里也提到过类似的分类）：

我现在做项目都会这样写错误处理：

async function fetchUser() {
 try {
 const res = await axios.get('/api/user', {
 params: { id: 1 },
 timeout: 5000 // 设置5秒超时
 });
 console.log('用户信息：', res.data);
 } catch (error) {
 if (error.response) {
 // 服务器返回错误：比如404（页面不存在）、500（服务器故障）
 alert(请求失败：${error.response.status} 
${error.response.data.message}
);

 } else if (error.request) {
 // 网络问题：比如断网、超时
 alert('网络连接失败，请检查网络设置');
 } else {
 // 其他错误：比如代码写错了
 alert(请求错误：${error.message});
 }
 }
}

这样处理后，用户不管遇到什么问题，都能看到明确的提示——比如网络断了会提示“网络连接失败”，服务器出错会提示“500

技巧2：拦截器（省掉重复代码的神器）

你有没有试过：每个请求都要写headers: { Authorization: 'Bearer token' }？或者每个响应都要写res.data？我之前做项目的时候，每个接口都重复写token，后来发现Axios有拦截器——可以在请求发出前、响应返回后“拦截”它们，统一处理重复逻辑。

场景1：统一加token（不用再重复写headers了）

很多项目需要用token做身份验证，每个请求都要在请求头里加Authorization: Bearer your-token。用请求拦截器可以一次性搞定：

// 请求拦截器：统一给所有请求加token
axios.interceptors.request.use(
 config => {
 // 从localStorage里取token（登录成功后存在这里）
 const token = localStorage.getItem('token');
 if (token) {
 // 把token加到请求头里
 config.headers.Authorization = Bearer ${token};
 }
 return config; // 必须返回config，否则请求发不出去
 },
 error => {
 return Promise.reject(error); // 处理错误
 }
);

加了这个拦截器后，不管你发GET还是POST请求，Axios都会自动把token加到请求头里——我之前写了10个接口，每个都要写token，现在只需要写一次，省了好多时间。

场景2：统一处理返回数据（不用再写res.data了）

Axios的响应对象里，res.data才是服务器返回的实际数据，每次都要写res.data很麻烦。用响应拦截器可以直接把res.data返回：

// 响应拦截器：统一提取res.data
axios.interceptors.response.use(
 response => {
 // 直接返回res.data，后面请求就不用写res.data了
 return response.data;
 },
 error => {
 return Promise.reject(error); // 处理错误
 }
);

加了这个拦截器后，请求的结果直接是res.data，比如：

// 之前要写res.data，现在直接用data
const user = await axios.get('/api/user', { params: { id: 1 } });
console.log('用户信息：', user); // 不用写user.data了！

是不是超方便？我现在做项目必加这两个拦截器，代码干净了好多。

最后想说：Axios其实没那么难——只要搞懂“基础使用+进阶技巧”，再避开我踩过的坑，你完全可以用它搞定所有接口请求。你要是按我说的步骤试了，不管成功还是遇到新问题，都可以在评论区告诉我——毕竟我踩过的坑，不想让你再踩一遍～

用CDN引入Axios总失效是怎么回事？

很可能是你用的CDN链接没加https！我去年帮朋友引Axios时也遇到过这个坑——原来的链接是http开头，浏览器会拦截不安全的内容，换成https开头的就好了。比如正确的CDN链接是https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js，记着一定要带https哦。

GET请求参数接口收不到，可能是哪里错了？

九成是你把params写成data了！GET请求的参数得用params配置项，因为它是挂在URL上的；而POST请求才用data。我之前帮朋友做项目时就踩过这个坑——把GET的参数放data里，结果接口根本没收到，后来改成params立马就好了。

POST请求接口收不到数据，是不是Content-Type设错了？

大概率是！POST要分两种情况：如果是提交登录、注册这类表单，得用application/x-www-form-urlencoded类型，用URLSearchParams构造数据；如果是发布文章这种JSON数据，用application/json类型（Axios默认就是这个，不用额外设）。我之前帮朋友做登录功能时，直接传对象当表单数据，结果Content-Type不对，接口收不到，后来用URLSearchParams就解决了。

Axios请求超时或断网，怎么给用户提示？

得先捕获错误！Axios的错误分三种：服务器返回错误（比如404、500）、网络问题（断网、超时）、其他错误。你可以用try…catch或者.catch捕获，然后给用户明确提示——比如网络断了就弹“网络连接失败，请检查网络设置”，服务器出错就弹“请求失败：XX状态码”。我之前做项目没处理这个，用户投诉页面卡住，后来加了错误提示就好了。

每个请求都要加token，有没有办法不用重复写？

当然有！用Axios的请求拦截器就行——把token存在localStorage里，然后在拦截器里统一加进请求头。比如我现在做项目都会写个请求拦截器，从localStorage取token，然后给每个请求的headers加Authorization: Bearer token，这样就不用每个请求都重复写了，省超多时间。

YUANLEISVIP

收藏 链接