uni-app开发经验分享十: 封装request请求

  • A+
所属分类:Web前端
摘要

可以设置全局的url访问地址(会拼接请求的url成完整的url,所以在写url时只需要”/xxx”),也可以在请求时设置具体url(以http或https开头)


http.js

//封装requset,uploadFile和downloadFile请求,新增get和post请求方法

let http = {     'setBaseUrl': (url) => {         if (url.charAt(url.length - 1) === "/") {             url = url.substr(0, url.length - 1)         }         http.baseUrl = url;     },     'header': {},     'beforeRequestFilter': (config) => { return config },     'beforeResponseFilter': (res) => { return res },     'afterResponseFilter': (successResult) => { },     'get': get,     'post': post,     'request': request,     'uploadFile': uploadFile,     'downloadFile': downloadFile }     function init(con) {     //url     let url = http.baseUrl;     if (url && con.url && !con.url.match(/^(http|https)://([w.]+/?)S*$/)) {         if (con.url.charAt(0) !== "/") {             con.url = "/" + con.url;         }         con.url = url.concat(con.url);     }     //header     if (http.header != undefined && http.header != null) {         if (!con.header) {             con.header = http.header;         } else {             Object.keys(http.header).forEach(function (key) {                 con.header[key] = http.header[key]             });         }     } }   function request(con) {     init(con);     let config = {         url: con.url ? con.url : http.baseUrl,         data: con.data,         header: con.header,         method: con.method ? con.method : 'GET',         dataType: con.dataType ? con.dataType : 'json',         responseType: con.responseType ? con.responseType : 'text',         success: con.success ? (res) => {             http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));         } : null,         fail: con.fail ? (res) => {             con.fail(res);         } : null,         complete: con.complete ? (res) => {             con.complete(res);         } : null     }     return uni.request(http.beforeRequestFilter(config)); }   function get(url, con, success) {     let conf = {};     if (con && typeof con == 'function') {         if (success && typeof success == 'object') {             conf = success;         }         conf.success = con     }else{         if (con && typeof con == 'object') {             conf = con;         }         conf.success = success;     }       if (url) {         conf.url = url     }     conf.method = "GET";     return request(conf); }   function post(url, data, con, success) {     let conf = {};     if (con && typeof con == 'function') {         if (success && typeof success == 'object') {             conf = success         }         conf.success = con;     } else {         if (con && typeof con == 'object') {             conf = con;         }         conf.success = success;     }     if (url) {         conf.url = url     }     if (data) {         conf.data = data     }     conf.method = "POST";     return request(conf); }   function uploadFile(con) {     init(con);       let config = {         url: con.url ? con.url : http.baseUrl,         files: con.files,         filesType: con.filesType,         filePath: con.filePath,         name: con.name,         header: con.header,         formData: con.formData,         success: con.success ? (res) => {             http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));         } : null,         fail: con.fail ? (res) => {             con.fail(res);         } : null,         complete: con.complete ? (res) => {             con.complete(res);         } : null     }     return uni.uploadFile(http.beforeRequestFilter(config)); }   function downloadFile(con) {     init(con);       let config = {         url: con.url ? con.url : http.baseUrl,         header: con.header,         success: con.success ? (res) => {             http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));         } : null,         fail: con.fail ? (res) => {             con.fail(res);         } : null,         complete: con.complete ? (res) => {             con.complete(res);         } : null     }     return uni.downloadFile(http.beforeRequestFilter(config)); }     export default http 

可以设置全局的url访问地址(会拼接请求的url成完整的url,所以在写url时只需要"/xxx"),也可以在请求时设置具体url(以http或https开头)

可以设置全局的header,如果请求时有header参数,会加上全局的header

可以设置拦截器,有发送请求前的拦截器beforeRequestFilter,参数是包含已经拼接完的url和header的请求参数,注意要返回;执行成功回调函数前的拦截器beforeResponseFilter,参数是回调成功函数的参数,注意要返回;执行成功回调函数后的拦截器afterResponseFilter,参数为成功回调函数的返回值。

具体例子

my.js

import http from './http'   const AUTH_TOKEN = "X-Auth-Token";   http.setBaseUrl("http://localhost:8081"); http.header['comp'] = "cjx913" if (uni.getStorageSync(AUTH_TOKEN)) {     http.header[AUTH_TOKEN] = uni.getStorageSync(AUTH_TOKEN); }   http.beforeResponseFilter = function (res) {     //X-Auth-Token     if (res.header) {         var respXAuthToken = res.header[AUTH_TOKEN.toLocaleLowerCase()];         if (respXAuthToken) {             uni.setStorageSync(AUTH_TOKEN, respXAuthToken);             http.header[AUTH_TOKEN] = respXAuthToken;         }     }     return res; }   let my = {     'http': http } export default my 

main.js

import Vue from 'vue' import App from './App'   Vue.config.productionTip = true   App.mpType = 'app'   import fly from './fly/fly' Vue.prototype.$fly = fly   import my from './my/my' var http = my.http;   Vue.prototype.$http = http   import store from './store' Vue.prototype.$store = store       const app = new Vue({   ...App }) app.$mount() 

index.js

<script> 	export default { 		data() { 			return { 				title: 'Hello', 				name:'cjx913' 			} 		}, 		onLoad() { 			 		}, 		methods: { 			session:function(){ 				// this.$fly.get('/session') 				// .then(function (response) { 				// 	console.log("hello"); 				// 	console.log(response.data); 				// 		console.log(response); 				// }) 				// .catch(function (error) { 				// 	console.log(error); 				// });   				// this.$http.request({ 				// 	url:"session", 				// 	success:(res)=>{ 				// 		console.log(res); 				// 	} 				// }) 				// this.$http.get("/session",function(res){ 				// 		console.log(res); 				// 	} 				// ) 				this.$http.get("/session",{ 				success:function(res){ 					console.log(res); 					} 					} 				) 			} 		} 	} </script> 

上述是简单设置baseUrl,header和通过拦截器拦截response的X-Auth-Token,并让请求带上X-Auth-Token