# request > 改別人的東西, 主要用途用于解決`uni.request`沒有攔截器問題. token驗證必須在頭里加入`Authorization` #### Code > utils/request.js ```javascript export default { config: { token:'', // token baseUrl: "https://edk24.com/", // 接口地址 header: { 'Content-Type':'application/x-www-form-urlencoded', // 請求頭 }, data: {}, method: "GET", dataType: "json", // 如設為json，會對返回的數據做一次 JSON.parse responseType: "text", success() {}, fail() {}, complete() {} }, interceptor: { request: null, response: null }, request(options) { if (!options) { options = {} } options.baseUrl = options.baseUrl || this.config.baseUrl options.dataType = options.dataType || this.config.dataType options.url = options.baseUrl + options.url options.data = options.data || {} options.method = options.method || this.config.method return new Promise((resolve, reject) => { let _config = null options.complete = (response) => { let statusCode = response.statusCode response.config = _config if (process.env.NODE_ENV === 'development') { if (statusCode === 200) { } } if (this.interceptor.response) { let newResponse = this.interceptor.response(response) if (newResponse) { response = newResponse } } // 統一的響應日志記錄 _reslog(response) if (statusCode === 200) { //成功 resolve(response); } else { reject(response) } } _config = Object.assign({}, this.config, options) _config.requestId = new Date().getTime() if (this.interceptor.request) { this.interceptor.request(_config) } // 統一的請求日志記錄 _reqlog(_config) if (process.env.NODE_ENV === 'development') { if (_config.data) { } } uni.request(_config); }); }, get(url, data, options) { if (!options) { options = {} } options.url = url options.data = data options.method = 'GET' if (this.config.token) { options.header = { 'Authorization':'Bearer '+this.config.token } } return this.request(options) }, post(url, data, options) { if (!options) { options = {} } options.url = url options.data = data options.method = 'POST' if (this.config.token) { options.header = { 'Authorization':'Bearer '+this.config.token, 'Content-Type':'application/x-www-form-urlencoded', // 強制頭 } } return this.request(options) }, put(url, data, options) { if (!options) { options = {} } options.url = url options.data = data options.method = 'PUT' if (this.config.token) { options.header.Authorization = 'Bearer '+this.config.token } return this.request(options) }, delete(url, data, options) { if (!options) { options = {} } options.url = url options.data = data options.method = 'DELETE' if (this.config.token) { options.header.Authorization = 'Bearer '+this.config.token } return this.request(options) } } /** * 請求接口日志記錄 */ function _reqlog(req) { if (process.env.NODE_ENV === 'development') { console.log("【" + req.requestId + "】 地址：" + req.url) if (req.data) { console.log("【" + req.requestId + "】 請求參數：" + JSON.stringify(req.data)) } } //TODO 調接口異步寫入日志數據庫 } /** * 響應接口日志記錄 */ function _reslog(res) { let _statusCode = res.statusCode; if (process.env.NODE_ENV === 'development') { console.log("【" + res.config.requestId + "】 地址：" + res.config.url) if (res.config.data) { console.log("【" + res.config.requestId + "】 請求參數：" + JSON.stringify(res.config.data)) } console.log("【" + res.config.requestId + "】 響應結果：" + JSON.stringify(res)) } //TODO 除了接口服務錯誤外，其他日志調接口異步寫入日志數據庫 switch(_statusCode){ case 200: break; case 401: break; case 404: break; default: break; } } ``` #### 使用 ``` javascript // 在`main.js`里引入 import http from 'utils/request.js' // 掛載到原型 Vue.prototype.$http = http // 使用方法 this.$http.get(url, data).then((response)=>{ // 業務 }).catch((err)=>{ // 異常 }) ```