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.举个栗子

        Axios与Mock使用详解_第1张图片Axios与Mock使用详解_第2张图片

       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)

            Axios与Mock使用详解_第3张图片

     6.在需要mock数据的页面接收mock数据

          import axios from 'axios'

          import Mock from './article-mock'

          Axios与Mock使用详解_第4张图片  

三.axios-mock-adapter  axios的模拟调试器

        1. 安装

                npm install axois-mock-adapter --save -dev

        2. mock.js 中引入

                Axios与Mock使用详解_第5张图片

        3.  table-mock.js中模拟数据

            Axios与Mock使用详解_第6张图片

        4. 使用adapter模拟任意post请求

            Axios与Mock使用详解_第7张图片

            

        5. 推荐博客

            https://segmentfault.com/a/1190000009464850

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

你可能感兴趣的:(Axios与Mock使用详解)