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

语言: CN / TW / HK
时间 2022-06-02 05:15:09
主题:

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发现先前的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，祝您顺利

「」