Axios与Mock使用详解

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

       项目git地址： https://github.com/LeonardKawayi/vue-iview.git