Ajax常用封装库Axios使用新手必看从入门到实战教程

文章目录▼CloseOpen

• 先把Axios“装”进项目里——从引入到第一个请求
• Axios的“偷懒神器”——拦截器+统一配置，让请求更省心
  • 请求拦截器：一次性搞定“加token”这件事
  • 响应拦截器：把数据“剥壳”，不用每次都写response.data
  • 为什么引入Axios后，浏览器提示“Axios is not defined”？
  • GET请求的参数应该放在哪里？
  • 我加了请求拦截器给请求头加token，但为什么没生效？
  • 为什么POST请求后端总说“缺少参数”？
  • Axios遇到跨域错误（CORS）怎么解决？

先把Axios“装”进项目里——从引入到第一个请求

学Axios的第一步，得先把它“放进”你的项目里。目前常用的引入方式就两种：CDN链接或者npm安装，我帮你理清楚怎么选——如果是静态页面（比如纯HTML+JS的小项目），直接用CDN最方便；如果是Vue、React这类工程化项目，用npm安装更规范。

先说CDN引入，你只需要在HTML的body末尾加一行脚本：

记住啊，一定别把脚本放head里！我最开始就犯过这傻——页面还没加载完就调用Axios，浏览器直接告诉你“Axios is not defined”，改成body末尾就行，等页面渲染完再加载脚本。

如果是用npm的项目，打开终端输一行命令：

npm install axios

然后在需要用的文件里 import 就行：

import axios from 'axios';

是不是特简单？接下来写第一个请求——我猜你最常用的就是GET（拿数据）和POST（发数据），我用自己做过的用户信息功能举例子，保证你一看就会。

比如你要拿ID为123的用户信息，GET请求的写法就像“给朋友发消息要地址”：把接口地址传给axios.get()，再用.then()接返回的数据。我写个真实的示例，你直接抄就行：

axios.get('/api/user', {
 params: {
 id: 123 // 要传的参数，比如用户ID
 }
})
.then(function (response) {
 console.log('拿到的用户信息:', response.data); // 关键！数据在response.data里
})
.catch(function (error) {
 console.log('请求出错了:', error); // 有问题就进这里
});

这里要注意，GET的参数得放在params里，我之前帮朋友改BUG的时候，他把参数直接写在地址后面，比如’/api/user?id=123’，虽然也能用，但用params更规范，尤其是参数多的时候，不容易乱。

再说说POST请求——比如提交登录表单，要给服务器发用户名和密码。POST的参数不用放params，直接当第二个参数传进去就行。我之前做登录功能的时候，犯过一个低级错误：把参数塞到params里，结果服务器一直返回“缺少用户名或密码”，查了半小时才发现POST的参数要直接传对象。给你看正确的写法：

axios.post('/api/login', {
 username: 'admin', // 用户名
 password: '123456' // 密码
})
.then(function (response) {
 console.log('登录结果:', response);
})
.catch(function (error) {
 console.log('登录出错了:', error);
});

为了让你更清楚GET和POST的区别，我做了个表格，对比一下参数位置和适用场景：

其实到这里，你已经能完成80%的日常请求了——比如拿商品列表、提交评论、登录注册，这些基础用法完全够用。但如果想更高效，得学学Axios的“隐藏技能”——拦截器和统一配置，能帮你少写好多重复代码。

Axios的“偷懒神器”——拦截器+统一配置，让请求更省心

我之前做后台管理系统的时候，遇到个麻烦事：每个请求都要加token（用户登录后的身份凭证），我手动写了十几次token到请求头里，直到有天同事问我“你怎么不用拦截器？”我才发现——哦，原来这活儿能自动化啊！

拦截器分两种：请求拦截器（发请求前做处理）和响应拦截器（拿到响应后做处理）。我给你举两个我自己用过的例子，你就能明白它们有多好用。

请求拦截器：一次性搞定“加token”这件事

比如你的项目里，用户登录后会把token存在localStorage里，每个请求都要把token加到请求头的Authorization里。用请求拦截器的话，只需要写一次代码，所有请求都会自动带token——再也不用手动复制粘贴了！我写个我项目里的真实代码：

// 请求拦截器：发请求前加token
axios.interceptors.request.use(function (config) {
 // 从localStorage里拿token
 const token = localStorage.getItem('token');
 // 如果有token，就加到请求头里
 if (token) {
 config.headers.Authorization = 'Bearer ' + token; // 这里的格式要和后端约定，比如Bearer + token
 }
 return config; // 一定要返回config，否则请求发不出去！
}, function (error) {
 // 请求出错时的处理（比如网络断了）
 return Promise.reject(error);
});

你看，就这么几行代码，所有请求都会自动带token。我之前没加拦截器的时候，每次写请求都要先拿token，再写headers，现在好了，一劳永逸。

响应拦截器：把数据“剥壳”，不用每次都写response.data

再比如，你后端返回的所有接口格式都是这样的：

{
 "code": 200, // 状态码，200成功，其他失败
 "data": { ... }, // 真正需要的数据
 "msg": "请求成功" // 提示信息
}

如果不用响应拦截器，你每次拿数据都要写response.data.data（因为Axios的response.data是后端返回的整个对象），是不是很麻烦？用响应拦截器的话，直接把data层“剥”出来，.then()里直接拿到数据——我做电商项目的时候就这么干的，代码清爽了一倍！

// 响应拦截器：处理返回的数据
axios.interceptors.response.use(function (response) {
 // 只返回data部分，把外层的code和msg剥掉
 return response.data;
}, function (error) {
 // 处理错误，比如token过期跳登录页
 if (error.response) {
 // 服务器返回的状态码，比如401（未授权，token过期）
 if (error.response.status === 401) {
 // 跳转到登录页
 window.location.href = 'https://www.mayiym.com/login';
 }
 }
 return Promise.reject(error);
});

这样处理后，你写请求的时候，.then()里直接拿到的就是后端的data部分：

axios.get('/api/goods')
.then(function (data) {
 console.log('商品列表:', data); // 直接拿到data，不用写response.data.data了！
})
.catch(function (error) {
 console.log('出错了:', error);
});

是不是超爽？

除了拦截器，还有个“偷懒”技巧——创建Axios实例。比如你的项目有两个接口前缀：一个是/api（后端接口），一个是/cdn（静态资源），或者不同的超时时间（比如接口请求超时设10秒，静态资源设5秒），这时候可以创建多个Axios实例，每个实例有自己的配置，不用每次都写完整地址。我做过的一个电商项目里，就有两个实例：一个用在商品接口，一个用在图片CDN，代码特别清晰：

// 创建“后端接口”实例
const apiInstance = axios.create({
 baseURL: '/api', // 基础地址，所有请求都会拼上这个前缀
 timeout: 10000, // 请求超时时间：10秒
 headers: { 'Content-Type': 'application/json' } // 请求头格式
});
// 创建“CDN资源”实例
const cdnInstance = axios.create({
 baseURL: 'https://cdn.example.com', // CDN地址
 timeout: 5000 // 静态资源超时时间设短点，5秒
});
// 用apiInstance发后端请求
apiInstance.get('/goods')
.then(function (data) {
 console.log('商品数据:', data);
});
// 用cdnInstance发CDN请求
cdnInstance.get('/images/logo.png')
.then(function (response) {
 console.log('logo图片:', response);
});

你看，这样分开后，不同的接口用不同的实例，不用每次都写完整的URL，也不用担心超时时间混淆——我同事看了我的代码，都问我“你这配置怎么这么清爽？”其实就是用了实例而已。

最后再跟你说个“避坑技巧”：一定要处理错误！我之前做项目的时候，忽略了catch里的错误处理，结果用户点了“提交”按钮没反应，以为是BUG，后来我在catch里加了个弹框提示，比如“网络有点慢，请稍后再试”，用户体验瞬间好了很多。我给你写个我项目里的错误处理示例：

axios.get('/api/user')
.then(function (data) {
 console.log('用户信息:', data);
})
.catch(function (error) {
 if (error.response) {
 // 服务器返回错误状态码，比如404（接口不存在）、500（服务器内部错误）
 alert('请求出错了，状态码：' + error.response.status);
 } else if (error.request) {
 // 请求发出去了，但没收到响应（比如网络断了）
 alert('网络好像不太好，请检查网络连接');
 } else {
 // 其他错误（比如代码写错了）
 alert('哎呀，好像出了点问题：' + error.message);
 }
});

这样处理后，不管遇到什么错误，用户都能得到提示，不会一脸懵地盯着没反应的按钮。

其实Axios的核心用法就这些——基础引入、GET/POST请求、拦截器、统一配置、错误处理。我当初学的时候，以为有多复杂，结果跟着这些步骤做，半天就上手了。你现在可以打开你的项目试试：先装Axios，写个简单的GET请求，再加个拦截器，看看是不是比之前顺手？

对了，如果你遇到跨域问题（比如前端跑在localhost:3000，后端跑在localhost:8080，浏览器报CORS错误），别慌——这个不是Axios的问题，是浏览器的同源策略限制，你可以让后端加CORS头（比如Access-Control-Allow-Origin: ），或者用Vue/React的代理配置（比如Vue的vue.config.js里加proxy），我之前做项目的时候就是用代理解决的，等你遇到了再查教程就行，现在先把Axios用明白。

你要是按这些方法试了，欢迎回来留个言——比如“我用拦截器加了token，太方便了！”或者“我遇到了个错误，帮我看看？”我看到都会回你的。其实Axios真的不难，跟着实战步骤走，多写几次就会了，别被“封装库”“异步请求”这些词吓到，本质上就是个“发消息拿数据”的工具而已～

我之前帮朋友排查过一模一样的问题——他写了拦截器加token，结果请求发出去还是没带token，最后发现是漏了最关键的一步：拦截器里没写return config。你想啊，拦截器的作用是“修改请求配置”，就像你给快递包裹贴快递单，贴完总得把包裹交给快递员吧？要是没return config，相当于你改了半天配置，最后没给Axios，它根本不知道该用什么配置发请求。所以第一步一定要检查拦截器最后有没有return config，这是最容易忘但最致命的点。

接下来你得看看token本身“在不在”“对不对”。比如你是不是把token存在localStorage里？打开浏览器控制台（按F12），输localStorage.getItem('token')，回车看看能不能拿到值——我之前有次犯傻，用户明明没登录，token是空的，我还怪拦截器没生效，后来一查才发现自己犯了低级错误。还有token有没有过期？后端一般会给token设过期时间（比如7天），过期了的话就算你加上，后端也不认，这时候得让用户重新登录拿新token。

最后你得核对headers的格式和后端“对不对版”。我之前做项目的时候，后端要求请求头里的Authorization是“Bearer 加token”（注意Bearer后面有个空格），结果我漏了这个空格，直接写了token，后端当然说没收到——后端是按约定的格式解析的，你给的格式不对，它根本认不出来。所以一定要问清楚后端，是要“Bearer token”还是直接写token，哪怕差一个空格都不行，不然就算你加了token，后端也接收不到。

为什么引入Axios后，浏览器提示“Axios is not defined”？

这种情况大多是引入顺序或位置错误。如果用CDN引入，要把标签放在HTML的末尾（标签之前），确保页面DOM加载完成后再执行Axios代码；如果是npm安装后import报错，先检查是否成功安装（看node_modules文件夹里有没有axios），或是否在支持ES模块的环境（如Vue/React项目）中使用。

GET请求的参数应该放在哪里？

GET请求的参数要放在axios.get()的第二个配置对象里的params属性中，比如axios.get('/api/user', { params: { id: 123 } })。不要直接把参数拼在URL后面（虽然能生效，但参数多了容易混乱，也不便于维护）。

我加了请求拦截器给请求头加token，但为什么没生效？

首先检查拦截器里有没有return config——请求拦截器必须返回修改后的config对象，否则请求无法发出；其次确认token是否正确存在（比如从localStorage里拿到的token没过期或没被清空）；最后检查headers的格式是否和后端约定一致（比如后端要求的是Bearer token值，就不能漏掉Bearer 前缀）。

为什么POST请求后端总说“缺少参数”？

POST请求的参数要直接作为axios.post()的第二个参数传对象（比如axios.post('/api/login', { username: 'admin', password: '123' })），不要放params里！params是GET请求的参数位置，POST参数需要放在请求体（body）中，后端才能正确解析。

Axios遇到跨域错误（CORS）怎么解决？

跨域是浏览器的同源策略限制（协议、域名、端口任一不同就会跨域），和Axios本身无关。解决方法有两种：一是让后端在响应头里添加CORS配置（比如Access-Control-Allow-Origin: ，允许所有域名访问，或指定前端域名）；二是前端用代理（比如Vue项目在vue.config.js里加proxy配置，把/api开头的请求转发到后端地址，如target: 'http://localhost:8080'）。