react项目使用axios和Charles模拟数据接口

2021年09月15日 阅读数:3
这篇文章主要向大家介绍react项目使用axios和Charles模拟数据接口,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

0.安装Charles中文破解版vue

 

1.安装axiosreact

yarn add axios

2.引入axiosios

import axios from 'axios'

3.写好json文件test.jsonjson

["vue","react","ng"]

4.配置Charlesaxios

(1)选择工具/本地映射api

 

 

 (2)本地映射设置弹出框,点击添加工具

 

(3)以下图设置this

主机必需要这么填spa

localhost.charlesproxy.comcode

 

 

 

 4.axios请求

componentDidMount(){
        axios.get('/api/test').then(res=>{
            console.log(res);
            this.setState(()=>({
                arr:[...res.data]
            }))
        })
    }

5.渲染数据

   render() {
        return (
            <div>
                <ul>
                    {
                        this.state.arr.map((v, i) => {
                            return <li key={i}>{v}</li>
                        })
                    }
                </ul>
            </div>
        );
    }

6.访问 localhost.charlesproxy.com:3000,这是一个坑,不是访问localhost:3000,是访问这个

结果: