zoukankan      html  css  js  c++  java
  • 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一、下载axios插件

    yarn add axios
    

      

    二、React的ajax请求代码如何放置

    建议放置在生命周期函数之componentDidMount()中

    三、ajax之get请求

            axios.get('url')
                .then(()=>{
                    // 成功
                alert('success');
            })
                .catch(()=>{
                // 失败
                alert('false');
            })
    

      解析:get内放置url,then后是请求成功的回调函数,catch是请求失败的回调函数

    四、本地mock(模拟)请求

    web开发时,一般都是前后端分离。因而前端开发时常常需要进行模拟请求(即mock)来检测数据渲染情况。

    推荐mock工具: charles。

    五、下载安装charles

    网址:https://www.charlesproxy.com/download/

    六、写入模拟数据

    新建json文件:app.json(建议将文件放在你的React项目同级目录)

    写入

    ["Dell","Odhle","paiobodewu"]
    

    七、打开charles修改端口

    1、打开charles

    2、点击菜单栏的tools

    3、选择Map local...

    4、新建:

    只需要修改

    (1)Path修改为你的ajax请求的url地址

    (2)Location path修改为你的json文件地址

  • 相关阅读:
    返回一个整数数组中子数组的最大值
    软工概论第二周个人项目四则运算二(改进)
    构建之法阅读笔记01
    单例模式
    .net基础加强
    使用jquery easy ui
    抽象工厂类
    System.Linq.Expressions.Expression
    创建上下文对象
    DBSesson
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/9406560.html
Copyright © 2011-2022 走看看