封面图记录2022.5.15于奥森公园~

引言

前端是一个快速发展的领域，而在前端的技术栈当中，前端请求又是最常见的一个领域，通过请求接口数据，才能将一个静态的页面动态化。本文将对简单比介绍目前常用前端请求的 ajax、axios、fetch三者之间的区别，并推荐一款一款基于axios二次封装的易用http库 cute-http。

正文

常用前端请求对比

ajax
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
- JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
fetch
- 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里，更好更方便的写法
- 更加底层，提供的API丰富（request, response）
- 脱离了XHR，是ES规范里新的实现方式
  - fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
  - fetch默认不会带cookie，需要添加配置项
  - fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
  - fetch没有办法原生监测请求的进度，而XHR可以
axios
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF

推荐一个基于axios封装的更易用的http库cute-http

使用方法

安装 cute-http

npm i cute-http --save

引入

import * as cute from 'cute-http';

api

常量

const {ONE_ERROR_ABORT_ALL, KEEP_ALL_BEEN_EXECUTED, LOCAL_STORAGE, MEMORY} = cute.const;

ONE_ERROR_ABORT_ALL 一个报错，中断所有的请求
KEEP_ALL_BEEN_EXECUTED 一个报错，不影响其他的请求，调用者需要自己处理返回的错误
LOCAL_STORAGE 将 get 返回结果缓存在localStorage
MEMORY 将 get 返回结果缓存在memory

setConfig

顶层 api，为 cute 配置参数

cute setConfig({
  retryCount: number,//重试次数
  timeout: 1900,//超时时间（毫秒）
  debug:true,//打开debug模式
  // cacheType: MEMORY, // 默认无，如果开启了缓存，cute只针对get请求做缓存，如需穿透缓存，可以对query参数加随机值，或者调用cute.get时，配置第二个参数{cacheType:null}，表示针对这一次调用不读取缓存值
  // failStrategy: ONE_ERROR_ABORT_ALL, //不设置的话，cute默认采用KEEP_ALL_BEEN_EXECUTED
})

multi

/**
 * 发起多个post请求
 * @param {Array<{type:'post', url:string, data:object} | {type:'get', url:string} | {type:'jsonp', url:string} >} items
 * @param {{failStrategy?:number, retryCount?:number, callbackParamName?:string, [otherAxiosConfigKey]:any}} extendedAxiosConfig
 * otherAxiosConfigKey @see https://github.com/axios/axios
 */
cute.multi(urls, extendedAxiosConfig)

get

// data 会被自动stringify拼接到url末尾
cute.get(url:string, data:string|object, extendedAxiosConfig:ExtendedAxiosConfig)

multiGet

cute.multiGet(urls:string[] | {url:string, data:string|object}[], extendedAxiosConfig:ExtendedAxiosConfig)

post

cute.post(url:string, data:object, extendedAxiosConfig:ExtendedAxiosConfig)

multiPost

cute.multiPost({url:string, data:object}[], extendedAxiosConfig:ExtendedAxiosConfig)

jsonp

// data 会被自动stringify拼接到url末尾
cute.jsonp(url:string, data:string|object, extendedAxiosConfig:ExtendedAxiosConfig)

multiJsonp

cute.multiJsonp(urls:string[] | {url:string, data:string|object}[], extendedAxiosConfig:ExtendedAxiosConfig)

以下代码在 test/test-api.js 中，用户可以执行 node ${your_test_dir}/test-api.js 查看效果

当然，你也可以注释掉某些代码，只看其中一个的效果

const cute = require('../index');
const {ONE_ERROR_ABORT_ALL, KEEP_ALL_BEEN_EXECUTED, MEMORY} = cute.const;
const axios = cute.axios;//这个是axios模块的引用

cute.setConfig({
  retryCount: 3,//设置重试次数
  timeout: 1900,//设置超时时间
  debug: true,
  dataVerifyRule: {//设置通用的响应数据校验规则，只支持校验json对象的第一层key的值和类型的校验
    data: 'object',
    code: 'number',
    message: 'string',
  },
  pathDataVerifyRule:{//对某些请求设置独立的数据校验规则
    '/staff/foo':{
      reply:'object',
      msg:'string',
    }
  }
  cacheType: MEMORY, // 值为 'memory' | 'localStorage' 默认无
  failStrategy: KEEP_ALL_BEEN_EXECUTED, //不设置的话，cute默认采用ONE_ERROR_ABORT_ALL
})

const updateBook = 'http://localhost:8888/update-book';
const getBooksByUid = uid => `http://localhost:8888/get-books?uid=${uid}`;

async function main(){
  const result1 = await cute.get(getBooksByUid(1));
  const books = result.result1;

  const result2 = await cute.multiGet([getBooksByUid(1), getBooksByUid(2)]);
  const [reply1, reply2] = result2;

  const result3 = await cute.post(updateBook, {id:1, name:'zk'});
  const updateReply = result.result3;

  const result4 = await cute.multiPost([{url:updateBook, body:{id:1, name:'zk'}}, {url:updateBook, body:{id:2, name:'wow'}}]);
  const [updateReply1, updateReply2] = result4;

}

更多示例见/test/test-api.js

运行测试用例

运行模拟服务器

* npm start

执行测试脚本

* npm test

彩蛋,test 目录下内置了一个 mini-express，仅仅用于服务本测试用例^_^，

写在后面

以上就是对当前常用的http请求方式的简单介绍，欢迎大家试用cute-http，使用过程中有欢迎随时交流。

介绍一款基于axios二次封装的易用http库

引言

正文