axios测试接口小练习

axios测试接口：

第一步，创建代码文件，包括页面文件，json文件，js文件

第二步，创建json文件模拟接口数据：

              {

  "users": [

    { "id": 1, "name": "Alice", "age": 25 },

    { "id": 2, "name": "Bob", "age": 30 }

  ],

  "posts": [

    { "id": 1, "title": "Hello Axios", "author": "Alice" }

  ]

}

第三步，使用 JSON Server，项目本地安装：npm install json-server --save-dev

第四步，启动JSON Server：npx json-server --watch db.json --port 3001

              获得接口地址：

• GET http://localhost:3001/users
• POST http://localhost:3001/posts

其中可以使用接口测试工具如postman进行接口的测试，

GET请求：

Post请求：

Post请求获取地址，输入即添加数据内容，并更新json数据内容。

第五步，由于我们是在浏览器中获得页面请求，所以html文件引入axios和js文件

第六步：js文件创建接口测试：

第七步：保存文件，运行页面如图：

出现的问题：如果在vsocde中使用“open with live server”，页面会不断刷新，这是因为服务端配置 json-server 与 Live Server 冲突。如果你同时运行了 VS Code 的 Live Server（用于自动刷新页面）和 json-server（用于模拟 API），Live Server 会监控 db.json 文件的变化，每次有新 POST 请求写入 db.json，Live Server 检测到文件变化就会自动刷新页面。
而你的 server.js 每次页面加载都会发送 POST 请求，导致 db.json 被修改，页面又被刷新，形成死循环。

普通解决方法：不在vscode内右击运行刷新页面，使用本地单独打开html文件方式运行页面可解决问题。