十分钟,结合代码快速入门axios

语言: CN / TW / HK

theme: smartblue

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第N天,点击查看活动详情

axios介绍

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 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发现先前的POSTPUT修改的数据已经被删除了

而这四个最基础的操作,便组成了增删改查

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,祝您顺利