# uniapp request請求封裝包含token兼容多端，簡單易用 1、首先我們在新建好的uniapp項目中新建一個文件夾common，再建一個request.js文件  2\. 在request.js放入以下代碼 ``` var apiUrl = ''; //放入后臺接口的url // #ifdef H5 var baseUrl = ''; if (process.env.NODE_ENV === 'development') { //本地環境，即開發環境 baseUrl = '/api' } else { //線上環境 baseUrl = apiUrl } // #endif //封裝request請求 const sendRequest = (url, method = 'GET', data = {}, contentType) => { //判斷header提交數據類型 let types = ''; if (method == 'POST' && !contentType) { types = 'application/x-www-form-urlencoded' } else if (method == 'POST' && contentType) { types = contentType } else { types = 'application/json'; } // #ifdef H5 var bases = baseUrl + '/' + url; // #endif // #ifndef H5 var bases = apiUrl + '/' + url; // #endif var token = uni.getStorageSync('token') || ''; return new Promise(function(resolve, reject) { uni.request({ url: bases, data: data, method: method, header: { 'Content-Type': types, 'Accept': 'application/json, text/javascript, */*; q=0.01', 'Authorization': token }, success(res) { if (res.header.authorization) { uni.setStorageSync('token', res.header.authorization); } else { var code = res.statusCode; switch (code) { case 401: uni.showModal({ title: '登錄提示', content: '身份已過期，請重新登錄后再來操作！', success:ress => { if (ress.confirm) { uni.redirectTo({ url:'/pages/WxLogin/Accredit' }) } } }) break; default: resolve(res); break; } } }, fail(err) { reject(err); } }) }) } module.exports.sendRequest = sendRequest ``` 3、在main.js中全局掛載 ``` import Vue from 'vue' import App from './App' import http from './common/js/request.js' Vue.config.productionTip = false Vue.prototype.$urls = ""; //線上url接口 Vue.prototype.$http = http; App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 4、在頁面中使用 **get方法** ``` //url-后臺接口 //data-參數，傳遞給后臺的參數 this.$http.sendRequest(url, 'GET', { data:data }).then(res => { //成功回調 }).catch(err => { //請求失敗 console.log(err) }) ``` **POST方法** ``` //url-后臺接口 //data-參數，傳遞給后臺的參數 this.$http.sendRequest(url,'POST',{ data：data }).then(res => { //成功回調 }).catch(err => { //請求失敗 }) ```