概要
Axios 是两个单纯的如前所述 Promise 的 HTTP 允诺库，用作应用程序应用程序和 node.js。
那时给我们讲呵呵，他们平常在工程项目中都是是不是采用它的
加装
npminstall axios -S基本上采用
import axios from “axios”; axios.get(/users).then(res => { console.log(res.data); });平常他们都是采用vue这种的全力支持单网页（spa）合作开发的架构来顺利完成销售业务网页合作开发，但不太可能在每一网页上都像下面那般去导入axios接着初始化USB，通常来说他们单厢对axios做一场PCB，进而能对允诺前和允诺后做许多处置，比如笔记监视、consequences等
PCB
他们能在工程项目产品目录Dieulefit两个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实例 constfetch = 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); } ); // 最终把PCB的方法回到 export default fetch;采用
// 导入PCB的http import http from @/http // http({ method: post, url: /xxx/xxx, // 允诺参数 data: { username:xxx, password:xxx } }).then(res=>{ console.log(res })觉得效果不错的请帮忙加个关注点个赞，经常分享后端实用合作开发技巧
