数据请求相关(json-server、postman、axios

概述
json-server : 一个快速开发的服务器，testful风格的接口，数据可以在对应文件内编辑
postman : 模拟数据，请求接口
网络基础相关
axios : 数据请求的包，拥有好用的请求拦截器，响应拦截器

json-server (快速建立一个服务器，并将数据放在一个json文件内)

1. 安装： 全局安装即可

npm install json-server -g

2. 使用：指定文件夹内执行

json-server xxx.json   //没有xxx.json,则创建并打开，有则打开

3. 手动修改数据结构
   使用sublime或记事本打开 xxx.json，手动编辑即可，如同操作json数据结构一样

4. 一些特性与问题

• 添加的数据，如果数据带id参数，则按照你的添加；如果数据没有id参数，则自动会添加，id在数据现有id上累加;
• resetful风格，同一个接口，使用put更新、delete删除时候，id必须要使用params方式，不能写在body请求体内;

postman (请求服务器接口的客户端)

1. 安装：
   前往官网(www.postman.com)，下载PC系统对应的安装文件(Download the desktop app)

2. 使用：

• 打开软件

• 创建一个免费的Team Workspace

• 点击右侧顶部 '+' 号，创建一个网络请求
  params参数写在url里面;
  query参数可以通过下面选项卡的Params写，也可以直接在url里，通过?xxx=xxx&xxx=xxx来自行书写;

  
  页面常规参数展示

• POST参数， 选择Body请求体，现在raw，选择数据格式json

  
  配置post请求参数

网络基础相关

网络请求的三个组成部分( 请求行、请求头 、请求体 )

1. 请求行 (method url)

2. 请求头

• Host: 请求地址
• Cookie: 权限缓存
• Content-Type: x-www-form-urlencode 或者 application/json

3. 请求体

• x-www-form-urlencode : username=tom&pwd=123
• application/json : { "username": tom, "pwd": 123 }

4. 常见状态码

状态码	英文描述	中文描述
200	OK	请求成功
201	Created	已创建，成功请求并创建了新的资源
401	Unauthorized	未授权/请求要求用户的身份认证
404	Not Found	服务器无法根据客户端找到资源
500	Internal Server Error	服务器内部错误

5. API分类
6. restful 风格

• 发送请求，由请求方式来决定
• 同一个路径可以进行多个操作
• 请求可以使用到 GET/POST/PUT/DELETE

2. restless 风格

• 发送请求，由请求地址来决定
• 一个请求路径只对应一种操作
• 一般只有 GET/POST

axios (数据请求第三方包)

※ 安装：
通过npm安装 npm install axios -S 或者 通过CDN引用远程地址

※ 使用：

1. 简写方式

• GET 方式

axios.get('http://localhost:3000/students/16').then(response=>{
    console.log(response.data.name);
},error=>{
    console.log(error);
});

• POST 方式

axios.post('http://localhost:3000/students/',{name:'小乐'}).then(response=>{
    console.log(response.data.name);
},error=>{
    console.log(error);
});

2. post 请求体的两种书写方式
   第1种，携带请求体参数 (application/json编码) -- data: { name:zhangsan, age:18 }
   第2种，携带请求体参数 (application/x-www-form-urlencoded编码) -- data:'name=zhangsan&age=18'

axios({
    url: 'http://localhost:3000/students'
    method: 'POST',
    data: { name:zhangsan, age:18 }
.then(
    response => { console.log( 成了 ,response.data); },
    error => { console.log( 失败了 ,error); }
);

3. 请求拦截器

• CancelToken是axios的一个构造函数，用来创建某个请求的取消函数
• CancelToken接收一个参数，用来说明取消信息
• 接收一个config参数，并且必须返回这个config，可以在返回前配置请求头信息，均可以在config内找到

//结构一个可以实例出某个取消请求的构造函数
const { CancelToken } = axios;
//定义一个取消某个定时器的函数
let _axiosCancelFn = null;
//拦截器中配置取消的方法 - (全局统一配置)
axios.interceptors.request.use(function(config){
    //一个请求节流器
        //如果在这里做请求节流，那么axios.all永远不会完成执行（不建议此处写节流）
    if(_axiosCancelFn){
        //给变量 _axiosCancelFn 赋值，对应这次axios请求的取消函数
        //这个取消函数，接收一个字符串参数，用来说明取消原因; _axiosCancelFn('单纯的不想请求数据了');
        _axiosCancelFn('单纯的不想请求数据了'); 
    };
    config.cancelToken = new CancelToken((c)=>{
        _axiosCancelFn = c;
    });
    return config;
});

4. 响应拦截器

• 响应拦截器接收两个参数，参数为函数，函数的各自参数分别为response与error
• 通过isCancel可以判断是否触发了，手动取消网络请求
• 错误分支可以返回一个没有reslove的promise，来停止错误走向axios的错误分支，实现统一管理错误信息
• 因为统一管理了错误处理，axios中直接书写正确的流程即可

const { CancelToken,isCancel } = axios;

//响应拦截器
axios.interceptors.response.use(
    (response) => { return response; },
    (error) => {
        //查看是否为人为取消请求
        if(isCancel(error)){
            console.log('请求失败：',error.message);
        }else{
            console.log('请求失败：',error);
        };
        //停止axios请求中的error流程
        return new Promise(()=>{});
    }
);

5. axios的批量请求 - axios.all

• 做批量请求，不能在请求拦截器内，通过取消操作，进行请求防抖，否则永远不会一起完成
• 多个promise请求，是逐一完成的，要一起请求，所有请求结束，返回结果，需要使用axios.all
• axios.all 内部实现是通过 promise.all

//批量请求
;(async function(){
    try{
        //以为axios.all的特性，要等所有结果都回来才行，如果在请求拦截器，通过CancelToken的取消方法做防抖，那么除了最后一项会执行完毕，都会失败，这样这个.all函数永远不会有执行结果。
        //请求了~~~~~~~~~~~~~~              触发了3次
        //请求失败： 单纯的不想请求数据了     触发了2次
        axios.all([
            axios.get('http://localhost:3000/students/11'),
            axios.get('http://localhost:3000/students/14'),
            axios.get('http://localhost:3000/students/15')
        ]).then(
            (response)=>{
                response.forEach(item => {
                    console.log(item.data.name);
                });
            },
            (error)=>{
                console.log(error);
            }
        );
    }catch(err){
        console.log(err);
    };
})();

6. axios的请求配置 - 全局配置

axios.defaults.baseURL = 'http://xxxxx';
axios.default.timeout = 2000;
axios.defaults.headers= { token:' xxxxxx ' };

7. axios创建克隆体 - 局部配置

• 创建克隆体 不支持 批量请求操作axios.all
• 创建克隆体 不支持 取消请求操作

//axios2为克隆体
const axios2 = axios.create({
    timeout: 3000,
    baseURL:'http://xxxxx'
})

7. 请求操作中通过async和await实现更加优雅的写法

※ 关于async

• async函数返回值为promise对象
• promis实例结果由async函数执行的返回值决定
  ※ 关于await
• await右侧是一个promise实例对象
• 如果表达式是其他值，直接将这个值作为await的返回值
  ※ 特别注意
• await必须写在async函数中，但是async函数中可以没有await
• 如果await的promise实例对象失败，就会抛出异常，需要通过try...catch来处理

//快速获取某学生信息
_btn4.onclick = async function(){
    try{
        var _resData = await axios.get('/students/16');
        console.log(_resData.data.name);
    }catch(err){
        console.log(err);
    };
};