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

作者: squidbrother | 来源:发表于2022-12-11 20:24 被阅读0次

数据请求相关(json-server、postman、axios
axios API
react 项目请求后端数据及跨域配置
关于http请求
axios数据请求/MVVM/MVC
13Vue的数据请求(Axios)使用
5.axios框架的基本使用
axios 相关知识小记
vue中的ajax请求和axios包详解
Postman Interceptor学习笔记

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

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

安装：全局安装即可

npm install json-server -g

使用：指定文件夹内执行

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

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

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

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

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

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

页面常规参数展示
POST参数，选择Body请求体，现在raw，选择数据格式json

配置post请求参数

网络基础相关

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

请求行 (method url)
请求头

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

请求体

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

常见状态码

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

API分类
restful 风格

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

restless 风格

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

axios (数据请求第三方包)

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

※ 使用：

简写方式

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);
});

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); }
);

请求拦截器

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;
});

响应拦截器

响应拦截器接收两个参数，参数为函数，函数的各自参数分别为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(()=>{});
    }
);

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);
    };
})();

axios的请求配置 - 全局配置

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

axios创建克隆体 - 局部配置

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

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

请求操作中通过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);
    };
};