{"path":"2319835","ref":"axios封装.md","title":"axios封装","content":"**在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等，下面是个完整实例...**\n```\nimport axios from 'axios';\r\nimport emd5 from 'js-md5';\r\nimport cx from '.\/config.js';\r\n\r\nconst isToken       = cx.isToken || false;\r\nconst tokenCacheKey = cx.tokenCacheKey;\r\nconst tokenSecret   = cx.tokenSecret;\r\nconst tokenCreate   = cx.apiToken;\r\nconst tokenRefresh  = cx.apiTokenRefresh;\r\nconst filterArray   = [tokenCreate,tokenRefresh];\r\n\r\nconst apiConfig = {\r\n\tbaseURL : cx.baseUrl,\r\n\ttimeout : cx.timeOut,\r\n\twithCredentials : true   \/* 表示跨域请求时是否需要使用凭证 默认false *\/\r\n};\r\n\r\nlet apiQueue = []; \/* 请求队列 *\/\r\nlet api = axios.create(apiConfig);\r\n\r\n\/* 请求拦截器 *\/\r\napi.interceptors.request.use(\r\n\tconfig => {\r\n\t\tif(isToken === false){\r\n\t\t\treturn config; \r\n\t\t}\r\n\t\t_pushQueue(config)\r\n\t\tlet data = _token(config);\r\n\t\treturn data;\r\n\t},\r\n\terror => {\r\n\t\treturn Promise.reject(error);\r\n\t}\r\n);\r\n\r\n\/* 响应拦截器 *\/\r\napi.interceptors.response.use(\r\n\tresponse => {\r\n\t\treturn _response(response.data);\r\n\t},\r\n\terror => {\r\n\t\treturn Promise.reject(error);\r\n\t}\r\n);\r\n\r\n\r\n\/**\r\n * 处理拦截器响应\r\n * @param {Object} res\r\n *\/\r\nfunction _response(res){\r\n\ttry{\r\n\t\tif(isToken === false){\r\n\t\t\treturn res;\r\n\t\t}\r\n\t\t\/* 可以增加其他拓展 *\/\r\n\t\tswitch (res.code){\r\n\t\t\tcase '10003' || '10004':\r\n\t\t\t\treturn _tokenRefresh().then(res=>{\r\n\t\t\t\t\treturn _cacheRequest(res)\r\n\t\t\t\t})\r\n\t\t\t\tbreak;\r\n\t\t\tdefault :\r\n\t\t\t\tapiQueue = [];\r\n\t\t\t\treturn res;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}catch(e){\r\n\t\treturn Promise.reject(e)\r\n\t}\r\n\r\n}\r\n\r\n\r\n\/* 刷新token *\/\r\nfunction _tokenRefresh(){\r\n\tlet token  = window.localStorage.getItem(tokenCacheKey),\r\n\t\tauthor = {Authorization : `bearer ${token}`};\r\n\t\t\r\n\treturn new Promise((resolve,reject)=>{\r\n\t\tapiConfig.headers = author;\r\n\t\taxios.create(apiConfig).get(tokenRefresh).then(res=>{\r\n\t\t\tif(res.data.code == '200'){\r\n\t\t\t\ttoken = res.data.data.refresh_token;\r\n\t\t\t\twindow.localStorage.setItem(tokenCacheKey,token);\r\n\t\t\t\tif(apiQueue.length == 0){\r\n\t\t\t\t\treject('没有可以执行的方法');\r\n\t\t\t\t}\r\n\t\t\t\tresolve(apiQueue[0])\r\n\t\t\t}else{\r\n\t\t\t\treject(res.data.msg);\r\n\t\t\t}\r\n\t\t}).catch(error=>{\r\n\t\t\treject(error);\r\n\t\t})\r\n\t});\r\n}\r\n\r\n\/* 获取token *\/\r\nfunction _token(config){\r\n\tlet token = window.localStorage.getItem(tokenCacheKey);\r\n\t\r\n\tif(token != '' && token != 'undefined' && token !== null){\r\n\t\tconfig.headers.Authorization = `bearer ${token}`\r\n\t\treturn config;\r\n\t}else{\r\n\t\tlet deviceId = uni.getSystemInfoSync().deviceId,\r\n\t\t\tsecret   = `${deviceId}&${tokenSecret}`;\r\n\t\treturn axios.get(tokenCreate,{\r\n\t\t\tparams : {\r\n\t\t\t\tmac    : deviceId,\r\n\t\t\t\tsecret : emd5(secret)\r\n\t\t\t}\r\n\t\t})\r\n\t\t.then(response => {\r\n\t\t\ttoken = response.data.data.token;\r\n\t\t\twindow.localStorage.setItem(tokenCacheKey,token);\r\n\t\t\tconfig.headers.Authorization = `bearer ${token}`\r\n\t\t\treturn config;\r\n\t\t})\r\n\t\t.catch(error => {\r\n\t\t\treturn Promise.reject(error);\r\n\t\t})\r\n\t}\r\n}\r\n\r\n\/* 添加待执行方法进入队列 *\/\r\nfunction _pushQueue(config){\r\n\t\r\n\tif(true === filterArray.includes(config.url)){\r\n\t\treturn false;\r\n\t}\r\n\tapiQueue.push({\r\n\t\turl    : config.url,\r\n\t\tmethod : config.method,\r\n\t\tparams : config.params,\r\n\t\tdata   : config.data\r\n\t});\r\n}\r\n\/**\r\n * @param {Object} config\r\n * @description 重新发送队列中的缓存的请求，为避免多余发送，只取第一个且发送成功后清空队列 \r\n *\/\r\nfunction _cacheRequest(config){\r\n\tlet request = {url:config.url,method:config.method};\r\n\tif(config.method == 'get'){\r\n\t\trequest.params = config.params;\r\n\t}else if(config.method == 'post'){\r\n\t\trequest.data = config.data;\r\n\t}\r\n\treturn api.request(request)\r\n\t\t.then(result => {\r\n\t\t\tapiQueue = [];\r\n\t\t\treturn Promise.resolve(result);\r\n\t\t}).catch(error => {\r\n\t\t\treturn Promise.reject(error)\r\n\t\t})\r\n}\r\n\r\n\/**\r\n * @param {String} url\r\n * @param {Array} data      \r\n * @description 对外暴露的POST方法\r\n *\/\r\nlet cxPost = (url,data)=>{\r\n\treturn _cacheRequest({\r\n\t\turl    : url,\r\n\t\tmethod : 'post',\r\n\t\tdata   : data\r\n\t});\r\n}\r\n\r\n\/**\r\n * @param {String} url\r\n * @param {Array} data      \r\n * @description 对外暴露的GET方法\r\n *\/\r\nlet cxGet = (url,data)=>{\r\n\treturn _cacheRequest({\r\n\t\turl    : url,\r\n\t\tmethod : 'get',\r\n\t\tparams : data\r\n\t});\r\n}\r\n\r\nexport {cxGet,cxPost};\r\n\r\n\n```"}