一、概述

在上一节的内容中,我们说了如何自己封装一个简易的Ajax方法。

其实在实际项目开发中,我们并不需要自己去封装,已经有很多成熟的Ajax第三方模块了,直接使用即可。

本节就来说说一个常用的Ajax第三方模块-Axios。

二、下载并引入Axios

可以直接使用npm下载Axios,命令如下:


npm install axios


因为我们要将Axios引入到前端的页面,所以需要将axios.js文件拷贝到静态文件目录。

在node_modules目录中,找到axios>dist>axios.min.js文件,拷贝到public目录中即可。然后在模板中用script标签来引入此js文件。

三、后台程序

关于后台程序,我们仍然使用第01节的水果列表增删改查接口,实例代码如下所示:


1 //数据
 2 let dataList = ["香蕉","苹果","鸭梨"];
 3 
 4 //get查看
 5 router.get("/fruits", ctx => {
 6     ctx.body = dataList;
 7 })
 8 //post添加
 9 router.post("/fruits", ctx => {
10     let fruit = ctx.request.body.fruit;
11     dataList.push(fruit);
12     ctx.body = dataList;
13 })
14 
15 //put修改
16 router.put("/fruits/:id", ctx => {
17     let id = ctx.params.id;
18     let fruit = ctx.request.body.fruit;
19     dataList.splice(id,1,fruit);
20     ctx.body = dataList;
21 })
22 //delete删除
23 router.delete("/fruits/:id", ctx => {
24     let id = ctx.params.id;
25     dataList.splice(id,1);
26     ctx.body = dataList;
27 })


四、Axios的常用方法

接下来,使用axios实现用户列表的增删改查。


1 //get请求查询数据
 2 axios.get("/fruits").then( res => {
 3     console.log(res.data)
 4 } )
 5 //post请求添加数据
 6 axios.post("/fruits",{
 7     fruit:"草莓"
 8 }).then( res => {
 9     console.log(res.data)
10 } )
11 //put请求修改数据
12 axios.put("/fruits/0",{
13     fruit:"西瓜"
14 }).then( res => {
15     console.log(res.data)
16 } )
17 //delete请求删除数据
18 axios.delete("/fruits/0").then( res => {
19     console.log(res.data)
20 } )


通过上面的代码可以看到,使用Axios完成异步的数据操作是非常简单的,我们在后续章节的Ajax相关内容,都会使用Axios来实现。

五、jQuery中的ajax方法

我们之前使用jQuery主要是用来操作DOM,其实jQuery也封装了Ajax方法,实例代码如下所示:


1 $.ajax({
2     url:"/fruit",
3     type:"get"
4 }).done( res => {
5     console.log(res);
6 })


如果项目是基于jQuery开发的,jQuery中的Ajax方法可以完全替代Axios,但是如果项目并没有使用jQuery,那么使用Axios这种轻量级的Ajax库会更方便。

六、总结

本节主要讲解的是Ajax的使用方法,在实际项目开发中,Axios需要结合表单和表格元素完成数据的操作,并在页面中展示出操作的结果。

如何在页面中操作数据,我们会在下一章《Vue.js入门与进阶》中,结合Vue框架一起讲解。

七、课后练习

默认数据如下所示,

["香蕉","苹果","鸭梨"]

分别用jQuery和axios实现后台数据列表的增删改查,要求如下:

  1. get方法获取数据列表
  2. post添加数据,然后重新查询
  3. put修改数据,然后重新查询
  4. delete删除数据,然后重新查询