vue之axios 进行ajax交互 mockjs拦截请求

这节首先学习下ajax操作

image.png

这节先不适用commonjs方式引入axios 直接使用script的方式本地引入
先看下下面例子

image.png

为了防止出现跨域 这里写的请求地址即为本页面地址

image.png

点击按钮后 运行 出现如下

image.png

后面讲到组件时候在学习重新渲染机制 现在只需要知道改变bookList的值，显示的试图就会发生相应的变化
如果我们要得到真实的数据，上一节学过mock，可以用来随机生成一些数据，因为后端api可能没上线等原因 所以我们在页面需要做些模拟拦截axios中的请求地址
假设上线后的图书地址是http://mybook.com/book/list(暂时还没上线)
如果axios请求肯定报错了
因为mock可以拦截请求 所以我们可以用mock拦截上线后的地址
下面看下演示
上节课我们用mock获取了图书列表
这节对上节的代码做些修改如下

image.png

image.png

运行结果

image.png

以上就是mockjs结合axios进行ajax交互 为了模拟后端api数据 假设后端api没上线
使用mock是很利于开发的