HTTP状态码与Axios

392 阅读2分钟

很久之前有个想法, 就是把常用的状态码复现出来, 一直没有时间, 最近刚好有时间, 准备搞一下, 顺便给合axios进行二次封装, 我看过很多人写过的关于axios的二次封装, 基本的思路是, 把状态码为200的返回数据放进来, 给前端操作使用, 而axios的二次封装的目的就是让前端只关心数据, 其他的错误或者异常都在全局统一处理, 对axios的封装其实就是围绕着状态码展开的, 本篇文章部分内容引自

<<HTTP权威指南>>

状态码是谁返回来的

状态码用来描述客户端与服务端沟通的状态, 那么当然要客户端对服务端发出请求才能产生各种状态, 状态码是服务器做出反应的一种描述, 这也说明大多数情况下(除websocket)服务器是被动的, 它一直处于待命状态.

image.png

报文结构 image.png

Axios

官网地址: Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js (axios-http.cn)

基础的用法就不再详细写了, 我们直接看拦截器部分,官网上是这个用的

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
   return config; 
}, 
function (error) {
   // 对请求错误做些什么
   return Promise.reject(error); 
});
// 所有的请求在发出前都要先执行请求拦截器,所以一些公共的操作都可以在这里配置, 比如在请求头中加入token等
// 添加响应拦截器 
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么 
    return response;
}, function (error) { 
// 超出 2xx 范围的状态码都会触发该函数。 
// 对响应错误做点什么 
   return Promise.reject(error); 
});
// 响应拦截发生在服务器返回数据时, 先要执行拦截器, 之后才再交给具体页面中的api请求,
// 比如,可以在这里把2XX数据直接交给具体页面中的api请求,就是在具体页面中直接处理data, 
// 而出错的信息全局统一处理, 具体页面不用再关心

我们要处理的大多数情况都是状态码为2XX情况, 在具体业务中, 我们也自定义一些状态码, 但一般都是在data中另行定义使用, 所以一个api返回的数据结构大概这个样子, 大多数情况下是json, 推荐用json

{ 
    "code": 1,  // 可与后端研发人员约定
    "showMsg": "success", 
    "errorMsg": "",
    "data":{ 
            "list": [], 
            "pagination":{ 
            "total": 100,
            "currentPage": 1,
            "prePageCount": 10 
        } 
    } 
}