JavaScript axios 怎么用
很多前端开发者在写网页时，都希望能让页面不用刷新就能拿到后端数据，这种“悄悄请求”的操作，就像你在奶茶店点单时，不用起身就能让店员把饮品递过来，不用打断店里的其他流程。实现这个操作，axios 是很多人会选的工具，今天就用生活化的例子，把 axios 的用法讲清楚。
---
第一步：先把 axios“请”到项目里
要想用 axios，得先把它装到你的前端项目里，就像你煮奶茶得先准备好茶叶、杯子这些材料。如果是用 npm 管理代码的项目，打开终端输一行命令就行：npm install axios；如果是简单的网页，也可以直接在 HTML 里加一行引用代码，就像你直接买现成的茶包，不用自己磨茶叶。
装完之后，要把 axios“喊出来”用。在你的 JavaScript 文件最开头加一行 import axios from 'axios'，就像你把茶包拆开，放进杯子里准备泡。
---
第二步：最常用的 GET 请求——“问店员要菜单”
GET 请求是 axios 最常用的操作，就像你去奶茶店，开口问“有没有菜单？”，只是你看不到自己的提问过程，但能立刻拿到结果。比如你想从后端拿到一组用户的名字，代码写起来很简单：
`javascript
// 把 axios 比作店员，这里“问 /api/users 要数据”
axios.get('/api/users')
.then(response => {
// 拿到的结果存在 response 里，data 就是真正想要的用户数据
console.log('拿到的用户：', response.data)
})
.catch(error => {
// 如果没拿到，比如店员没空或者菜单卖完了，就会走这里
console.error('出错啦：', error)
})
`
举个具体的生活化例子：你点奶茶前要确认能不能做“少糖”，那就要给 GET 请求加个“要求”，就像告诉店员“我要菜单里的少糖饮品”，代码里就是把参数加在 get 后面的括号里：
`javascript
// 要“少糖”的菜单，参数 params 就像你的要求
axios.get('/api/menu', { params: { sugar: 'less' } })
.then(res => console.log('少糖饮品：', res.data))
`
---
第三步：POST 请求——“告诉店员我要点单”
如果说 GET 是“问东西”，那 POST 就是“给东西”，就像你告诉店员“我要一杯珍珠奶茶，少冰”，把你的要求传给店员，让店员下单。比如你要给后端提交一个新用户的信息，代码是这样的：
`javascript
// 把用户信息打包成“点单内容”，传给 /api/user 这个下单入口
axios.post('/api/user', { name: '小明', age: 18 })
.then(response => {
// 后端确认收到后，会给你一个“订单号”之类的结果
console.log('下单成功，订单信息：', response.data)
})
.catch(error => {
// 如果下单失败，比如库存不够，就会提示错误
console.error('下单失败：', error)
})
`
这个过程就像你在小程序上下单，填好地址和饮品，点提交，后端收到后告诉你“已接单”，本质就是把你的数据通过 POST 发给了服务器。
---
第四步：统一“设置”——不用每次都重复说要求
如果你的项目里，所有请求都要加相同的内容，比如每个请求都要带用户的登录 token，就像你每次去同一家奶茶店都要报会员号，不用每次都重新说，axios 可以帮你统一设置：
`javascript
// 给 axios 设置全局的基础地址，就像你每次点单不用再说“去XX路的那家店”
axios.defaults.baseURL = 'https://你的后端地址.com'
// 统一加会员号（token），就像每次点单都报会员号
axios.defaults.headers.common['Authorization'] = 'Bearer 你的会员号'
`
这样之后，你写请求时不用每次都写完整地址和 token，直接写 axios.get('/menu') 就行，就像你直接跟店员说“要菜单”，不用再说“去XX路XX号的XX店，报我的会员号，给我菜单”。
---
小提示：axios 还能做更多
除了 GET 和 POST，axios 还支持 PUT（修改数据，就像你点完单改要求）、DELETE（删除数据，就像你取消订单），用法和上面的例子差不多，只是把 get 换成对应的方法就行。而且它还会自动帮你处理数据，不用你自己转格式，就像茶包泡出来的茶已经调好味，不用你自己加茶加糖。
只要记住，axios 就是你和后端之间的“传声筒”，你把需求告诉它，它帮你把需求发给后端，再把结果带回来，按上面的步骤用，基本就能解决大部分前后端数据交互的问题了。