Json server的配置和使用 + axios的配置和使用

json-server 是一个简单的 HTTP 服务器,可以快速创建 mock 后端 API。
本人在学习react的阶段就是使用json server和axios来进行模拟获取数据

Json server的配置

先进行安装

npm install -g json-server

创建一个db.json文件作为数据源:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ]
} 

启动json-server,指定db.json文件作为数据源

在package.json中添加脚本:“json-server”: “json-server --watch db.json”
运行npm run json-server启动服务器

json-server --watch db.json

默认监听3000端口。你可以:

• GET /posts
• GET /posts/1
• POST /posts
• PUT /posts/1
• PATCH /posts/1
• DELETE /posts/1
  来获取、添加、更改、删除posts资源。

还可以:

• 指定其他端口:json-server --watch db.json --port 8000
• 获取远程数据:json-server http://example.com/db.json
• 添加路由:在db.json同级创建routes.json路由文件
• 启动安全认证:json-server --watch db.json --auth username:password
• 等

axios的配置和使用

安装

npm install axios

导入

import axios from 'axios';

发起请求

// GET
axios.get('/user/12345');

// POST
axios.post('/user', { firstName: 'John' }); 

// PUT
axios.put('/user/12345', { age: 30 });  

// DELETE 
axios.delete('/user/12345');

除了默认配置外,axios也支持更加精细的配置,常用的有:

• baseURL:设置请求的基础URL
• timeout:设置请求超时时间
• headers:设置请求头
• params:用于GET查询字符串
• data:用于POST、PUT的数据体
• withCredentials:是否发送跨域cookie
• auth:用于HTTP Basic Auth认证
• 等等…

例如:

axios.defaults.baseURL = 'https://api.example.com/';

axios.get('/users', {
  params: {
    ID: 123
  },
  headers: {
    Authorization: 'gboh' 
  }
});

axios也支持:

拦截器:请求拦截器和响应拦截器,用于在请求前和请求后做一些处理

• 请求取消:通过CancelToken进行请求的取消控制
• 请求/响应转换:使用transformRequest和transformResponse做数据转换
• 等等…