十分钟,结合代码快速入门axios
theme: smartblue
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第N天,点击查看活动详情
axios介绍
Axios 是一个基于 promise 网络请求库,作用于
node.js
和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.jshttp
模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
由于Vue本身是不具备通讯工具的,故需要一个额外的通讯框架和服务器进行交互,而作为最火热的网络请求库,axios自然也就成为了vue官方推荐的交互工具了,当然这也和他拥有极为优秀的功能特性分不开的:
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
安装
使用 npm:
js
npm install axios
在学习axios
之前,你必须掌握的知识是ajax
和es6新增的promise
,如果还没有学会相关的内容,那建议看AJAX文档和阮一峰老师的ES6标准入门
Json-Server模拟接口
当我们在后端尚未给我们传来接口的时候,我们可以通过node模块中的Json-server
来mock一个数据接口,当后端把接口给我们的时候也方便我们直接替换接口即可,对于前后端分离式开发无疑是有益的。
安装Json-Server
javascript
npm install -g json-server
创建db.json
我们在vscode中去创建一个带数据的db.json文件,例如:
json
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"title": "今天天气不错啊",
"author": "张三",
"id": 2
}
}
启动json-server
js
json-server --watch db.json
便会在终端窗口得到如下结果:
axios基本操作
在运行好json-server后,我们便可以开始尝试axios的一些基本操作了
我们先引入axios和bootstrap(直接引入到当前页面即可),再搭建一个基础界面,能满足我们基本操作的静态页面
```html
基本使用
```
GET请求
GET
命令的作用是获取数据,接下来我们用实际代码来演示一下
javascript
// 获取按钮
// 返回与文档指定的选择器组匹配的中的元素( 列表使用优先的先遍历文档的节点)
const btns = document.querySelectorAll('button')
// 第一个按钮
btns[0].onclick = () => {
axios({
// 请求类型
method: 'GET',
// URL
url: 'http://localhost:3000/posts/1',
}).then(response => {
console.log(response);
})
}
打开网页,查看控制台,发现输出了db.json
中的数据
POST请求
POST
命令的作用是向原接口发送数据,添加新的数据
js
// 添加一篇新的文章
btns[1].onclick = () => {
axios({
// 请求类型
method: 'POST',
// URL
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: "今天天气不错啊",
author: "张三"
}
}).then(response => {
console.log(response);
})
},
成功运行后,我们打开db.json
查看数据的变化:
发现数据已经成功添加
PUT请求
PUT
命令的作用是更新数据,相当于数据库中的“改”
我们修改第三个按钮,来添加axios命令:
js
btns[2].onclick = () => {
axios({
// 请求类型
method: 'PUT',
// URL
// PUT需要传id(此处需要修改的是id=3的数据)
url: 'http://localhost:3000/posts/3',
// 设置请求体
data: {
title: "今天天气不错啊",
author: "李四"
}
}).then(response => {
console.log(response);
})
},
点击按钮,再查看db.json
,发现数据已经发生了改变:
DELETE请求
delete
命令的作用是删除数据,废话不多说我们直接上代码
js
btns[3].onclick = () => {
axios({
// 请求类型
method: 'delete',
// URL
url: 'http://localhost:3000/posts/3'
}).then(response => {
console.log(response);
})
}
我们打开控制台:
发现返回的数据已为空,再打开db.json
发现先前的POST
和PUT
修改的数据已经被删除了
而这四个最基础的操作,便组成了增删改查
axios拦截器
这部分可以直接参考官方的文档
axios默认配置
当我们每次使用axios的基本操作的时候,我们会发现都会涉及到URL
,每次都要写那么一长串似乎有些太麻烦了一点了,我们发现不同的命令在URL
上面的区别似乎只有最后的一部分,那么这时候,我们可以设置一个默认的URL地址,或者叫做基础的URL,只需要在后面添加一部分即可。
除此之外,我们还可以设置默认的超时时间,当超过我们的设置时间仍未返回结果我们就取消请求,接下来,我们结合代码来看看:
javascript
axios.defaults.method = 'GET' //默认的请求类型为get
axios.defaults.baseURL = 'http://localhost:3000/' //设置基础url
axios.defaults.parmams = {
id: 100
} //默认id为100
axios.defaults.timeout = 3000 //设置超时时间(3秒后如果结果还没回来就取消请求)
是不是豁然开朗了,关于默认配置,我们还可以查看官方的文档,这里就不多赘述了
总结
总得来说,作为想要从事前端开发的人来说,axios是无疑必备的一项技能,学会了axios才能在后端人员给我接口的时候,能够对他的接口“为所欲为”哈哈哈哈,希望这篇文章能够顺利让你入门axios,祝您顺利