前端axios在项目实战中的封装

　　简介
　　Axios 是一个简单的基于 Promise 的 HTTP 请求库，用于浏览器客户端和 node.js。
　　今天给大家讲一下，我们平时在项目中都是怎么使用它的安装npm install axios -S基本使用import axios from ＂axios＂; axios.get(＂/users＂).then(res => {     console.log(res.data); });
　　平时我们都是使用vue这样的支持单页面（spa）开发的框架来完成业务页面开发，但是不大可能在每个页面上都像上面那样去引入axios然后调用接口，一般来说我们都会对axios做一次封装，从而可以对请求前和请求后做一些处理，比如说日志监控、错误处理等封装
　　我们可以在项目目录下建一个http.js文件，内容如下，我们以vue和elementui为例// 单独引入一次axios import axios from ＂axios＂; // vuex，里面存放着登录后的token信息，每次请求前要放到header里 import store from ＂@/store＂; // elementui的右上角提示信息组件及加载组件 import { Notification, Loading } from ＂element-ui＂; import {   // 自定义超时时间，一般30秒   TIME_OUT_TIME,   // 和后台约定这个值为＂1＂时，代表业务数据返回正常，其它情况有报错   STATUS_CODE_OK,   // 右上角提示信息停留时长，一般3秒   NOTIFY_STAY_TIME,   //这个值为401常量，代表请求是没有授权的，需要授权或登录   CODE_UNAUTHORIZED,   // header里jwt的token信息，用于每次请求的授权校验   HEADER_TOKEN_NAME } from ＂@/config＂; // 路由 import router from ＂@/router＂; // loading加载遮罩，请求前加全屏遮罩，防止重复请求 let loadingInstace = null; // 创建axios实例 const fetch = axios.create({   // 请求的baseUrl   baseURL: process.env.VUE_APP_BACK_END_API_PX_URL,   // 是否可以查cookie   withCredentials: true,   // 请求超时时间   timeout: TIME_OUT_TIME, }); // request请求时拦截器 fetch.interceptors.request.use(   (config) => {     // 请求前加loading遮罩     loadingInstace = Loading.service({       lock: true,       text: ＂加载中＂,       spinner: ＂el-icon-loading＂,       background: ＂rgba(0, 0, 0, 0.7)＂,     });     if (store.getters.token) {       // 如果已经登录或授权，那么把token带在请求的header里       config.headers[HEADER_TOKEN_NAME] = store.getters.token;     }     return config;   },   (error) => {     // 请求时报错了，关掉loading遮罩,防止页面卡死     loadingInstace && loadingInstace.close();     // 并把错误信息提示在页面右上角，统一处理     Notification.error({       title: ＂错误＂,       message: error.message,       duration: NOTIFY_STAY_TIME,     });     return Promise.reject(error);   } ); // respone返回数据时拦截器 fetch.interceptors.response.use(   (res) => {     // statusCode为200以下的会走这里     // 关掉loading遮罩     loadingInstace && loadingInstace.close();     // 和后台约定的，如果返回的数据code不为＂1＂那么就是有业务错误     // 并把后台返回的业务错误信息提示在页面上     if (res.data.code && res.data.code !== STATUS_CODE_OK) {       Notification.error({         title: ＂错误＂,         message: res.data.msg,         duration: NOTIFY_STAY_TIME,       });     }     return res;   },   (err) => {     // 返回结果statusCode不为200，一般为200以上常见的比如，401，500这些的     // 关掉loading遮罩，防止页面卡死     loadingInstace && loadingInstace.close();     // 有返回数据时     if (err.response) {       // 如果是401的话，说明没有授权或者登录，直接去授权或登录页       if (err.response.status === CODE_UNAUTHORIZED) {         router.push(＂/login＂);       } else {         // 其他情况，把错误信息显示在页面上         Notification.error({           title: ＂错误＂,           message: err.message,           duration: NOTIFY_STAY_TIME,         });       }     } else if (err.request) {       // request时错误信息，同上面一样的处理逻辑       if (err.request.status === CODE_UNAUTHORIZED) {         router.push(＂/login＂);       } else {         Notification.error({           title: ＂错误＂,           message: err.message,           duration: NOTIFY_STAY_TIME,         });       }     } else {       // 其它错误信息提示       Notification.error({         title: ＂错误＂,         message: err.message,         duration: NOTIFY_STAY_TIME,       });     }     return Promise.reject(err);   } ); // 最终把封装的方法返回 export default fetch; 使用// 引入封装的http import http from ＂@/http＂  // 获取个人用户的区域列表 http({     method: ＂post＂,     url: ＂/xxx/xxx＂,     // 请求参数     data: {       username:＂xxx＂,       password:＂xxx＂     }  }).then(res=>{ 		console.log(res })
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧