Axios与Mock使用详解
VUE之Axios与Mock使用详解 如果对vue的入门安装等有问题,请参考第一篇博客:https://blog.csdn.net/weixin_38316338/article/details/80608450一.Axios使用详解 1.基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 2.功能特性在浏览器中发送...
VUE之Axios与Mock使用详解
如果对vue的入门安装等有问题,请参考第一篇博客:https://blog.csdn.net/weixin_38316338/article/details/80608450
一.Axios使用详解
1.基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
2.功能特性
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 自动转换 JSON 数据
- 客户端支持保护安全免受 XSRF 攻击
3.引入方式
npm install axios
cnpm install axios //taobao镜像
4.举个栗子
5.推荐博客 https://blog.csdn.net/binginsist/article/details/65630547
二.Mock使用详解
1.使用mock模拟数据,实现开发的前后端分离
2. mock特性
(1).前后端分离
(2)不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
(3)数据类型丰富
(4)通过随机数据,模拟各种场景。
总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理,这样真正实现了前后台的分离开发。
3.安装mock
npm install mockjs --save-dev 以及使用淘宝镜像 cnpm install mockjs --save-dev
4. 在main.js项目入口处引入mock,添加下面一行
require('./mockjs')
5. 添加一个mock规则(article-mock.js)
6.在需要mock数据的页面接收mock数据
import axios from 'axios'
import Mock from './article-mock'
三.axios-mock-adapter axios的模拟调试器
1. 安装
npm install axois-mock-adapter --save -dev
2. mock.js 中引入
3. table-mock.js中模拟数据
4. 使用adapter模拟任意post请求
5. 推荐博客
https://segmentfault.com/a/1190000009464850
更多推荐
所有评论(0)