文章目錄

• • • 前言
    • 實現
    • • `request.js`
      • `http.js`
    • 實際使用
    • 配置文件
    • • `config.js`
      • `storage.js`
      • `main.js`
    • 擴展
    • • `utils.js`
      • `store/index.js`

前言

只要是前端，不管什么框架和語言，都避免不了和服務端請求數據，以下是uniapp提供的APIuni.request

uni.request({url: 'https://www.example.com/request', //僅為示例，并非真實接口地址。data: {text: 'uni.request'},header: {'custom-header': 'hello' //自定義請求頭信息},success: (res) => {console.log(res.data);this.text = 'request success';} });

為了提高開發效率，封裝可以使開發過程更加的酣暢淋漓。

實現

一般選擇在外面的根目錄下，創建utils文件夾，utils文件夾下創建http.js和request.js

• utils/http.js
• utils/request.js

request.js

封裝request請求的文件

import config from "@/config"; // 配置文件 import storage from "./storage"; // 緩存封裝export default {console(options){if(config.debug){// console.log("<<===============================================>>");// console.log("request start");// console.log("header" + JSON.stringify(options.header));// console.log("method: " + options.method + " URL: " + options.url);// console.log(options.data);// console.log("request end");// console.log("<<===============================================>>");} },domain(){return config.uni_app_web_api_url.replace("api","");},send(options={}){// loading加載uni.showLoading({title: '加載中'});// 拼接路勁，下面的配置文件會提到options.url = config.uni_app_web_api_url + '' + options.url;// 請求方式options.method = options.method || "GET";// 這里看項目的情況來定，如果是沒有token，那就刪除這里，上面的storage也不需要引入let users = storage.getJson("users");if(users != null){options.header = { "Auth-Token" : users.token };}this.console(options); // 打印請求數據，調試用，上線可以注釋// 發起Promise請求return new Promise((resolve, reject) =>{uni.request(options).then(data=>{var [error, res] = data;if(error != null){reject(error);}else{// 相應攔截、根據后端的狀態碼來寫，可以自行判斷和封裝if(res.data.status == '-1001'){uni.hideLoading();uni.navigateTo({url: '/pages/Login/login/login'});}else{resolve(res.data); }}});});},get(url="",data={}){return this.send({url: url,data: data});},post(url="",data={}){return this.send({url: url,data: data,method: "POST"});} };

• 平時用的多的主要還是get和post，因此就封裝了兩個，如果還有更多的，可以把里面的內容單獨提取出來，然后再定義put、delete等方法

http.js

封裝的api接口

import request from './request'// get請求 export function getBannerList(params) {return new Promise((resolve, reject)=>{request.get("/banner/getList", params).then((result)=>{resolve(result)}).catch(err=>{reject(err)});}); }// post請求 export function addBanner(params) {return new Promise((resolve, reject) => {request.post("/banner/add", params).then((result)=>{resolve(result);}).catch((error)=>{reject(error);});}); }// 如果說比較懶，或者是不想這么麻煩，也可直接用這兩個，調用的時候第一個參數換成接口地址即可 export function httpGet(url, params) {return new Promise((resolve, reject)=>{request.get(url, params).then((result)=>{resolve(result)}).catch(err=>{reject(err)});}); }export function httpPost(url, params) {return new Promise((resolve, reject)=>{request.post(url, params).then((result)=>{resolve(result)}).catch(err=>{reject(err)});}); }

實際使用

在頁面使用

<template><view class="page"> </view> </template><script> export default {data() {return {bannerList: [],};},onLoad() {this.loadData();},methods: {loadData() {this.$http.getBannerList().then((res) => {if (res.code == 1) {// 根據后端接口的情況，如果需要自己拼接，則自行拼接，不需要則刪除res.banner.forEach((val) => {val = this.$config.uni_app_web_url + val;});this.bannerList = res.data;} else {// 提示網絡錯誤uni.showToast({title: "網絡錯誤，請重試~",icon: "none",duration: 2000,});}}).catch((error) => {console.log(error);});},}, }; </script><style scoped lang="scss"> </style>

• 以下還有幾個配置文件，磨刀不誤砍柴工，都可以放在utils目錄下

配置文件

config.js

此文件放在根目錄，和main.js同級即可

export default {web_name: "網站名稱", uni_app_web_url: "http://baidu.com/", // h5域名PC域名，用于分享圖片或者拼接圖片時使用，結尾必須加 “/”uni_app_web_api_url: "http://baidu.com/api", // 請求接口的地址debug: true }

storage.js

緩存封裝，一些需要用的數據，可以放進去，類似token，語言，主題之類的。

export default {set(name,value){uni.setStorageSync(name,value);},setJson(name,value){uni.setStorageSync(name,JSON.stringify(value));},get(name){return uni.getStorageSync(name);},getJson(name){const content = uni.getStorageSync(name);if(!content){return null;}return JSON.parse(content);},remove(name){uni.removeStorageSync(name);},clear(){uni.clearStorageSync();} };

main.js

這是根目錄下的main.js

import Vue from 'vue'; import App from './App';import * as http from './utils/http' // http請求接口 import * as utils from './utils/utils' // 工具文件 import * as common from './utils/common' // 公共文件 import store from './store' // vuex，不需要的可以自行刪除 import storage from 'utils/storage' // 緩存文件 import config from '@/config' // 配置// 定義全局 Vue.prototype.$store = store Vue.prototype.$storage = storage Vue.prototype.$http = http Vue.prototype.$utils = utils Vue.prototype.$common = common Vue.prototype.$config = configApp.mpType = 'app' const app = new Vue({...App }) app.$mount()

擴展

utils.js

很多可以公共使用的方法，為你準備好了

export function msg(content,time=3000){uni.showToast({icon:'none',title: content,duration: time}); }export function showLoading(content="加載數據中...",mask=true){uni.showLoading({title: content,mask: mask}); }export function hideLoading(timer=0){if(timer > 0){var t = setTimeout(function () {uni.hideLoading();clearTimeout(t);}, timer);}else{uni.hideLoading();} }export function in_array(search,array){let flag = false;for(let i in array){if(array[i]==search){flag = true;break;}}return flag; }export function isDataType(data,type){return Object.prototype.toString.call(data) === '[object '+type+']'; }export function ltrim(str,char){let pos = str.indexOf(char);let sonstr = str.substr(pos+1);return sonstr; }export function rtrim(str,char){let pos = str.lastIndexOf(char);let sonstr = str.substr(0,pos);return sonstr; }/*** 保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。*/ export function navigateTo(url,params){uni.navigateTo({url: parseUrl(url,params)}) }/*** 關閉當前頁面，跳轉到應用內的某個頁面。*/ export function redirectTo(url,params){uni.redirectTo({url: parseUrl(url,params)}); }/*** 關閉所有頁面，打開到應用內的某個頁面。*/ export function reLaunch(url,params){uni.reLaunch({url: parseUrl(url,params)}); }/*** 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。*/ export function switchTab(url,params){uni.switchTab({url: parseUrl(url,params)}); }/*** 關閉當前頁面，返回上一頁面或多級頁面*/ export function navigateBack(delta){uni.navigateBack({delta: delta}); }/*** 預加載頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。*/ export function preloadPage(url, params){uni.preloadPage({url: parseUrl(url,params)}); }export function prePage(){let pages = getCurrentPages();let prePage = pages[pages.length - 2];// #ifdef H5return prePage;// #endifreturn prePage.$vm; }/*** rpx轉px* @param int|float num*/ export function rpx2px(num){// const info = uni.getSystemInfoSync()// let scale = 750 / info.windowWidth;// return (Number.isNaN(parseFloat(num)) ? 0 : parseFloat(num)) / scale;return uni.upx2px(num); }/*** @param int|float num*/ export function px2rpx(num){return num/(uni.upx2px(num)/num); }/*** 獲取窗口的寬高*/ export function getSystemInfo(){const info = uni.getSystemInfoSync();return {w: info.windowWidth,h: info.windowHeight}; }function parseUrl(url,params){let arr = [];let string = '';for(let i in params){arr.push(i + "=" + params[i]);}string = "/pages/" + url;if(arr.length > 0){string += "?" + arr.join("&");}return string; }

• 使用

  this.$utils.msg("消息提示") this.$utils.navigateTo("login") // 頁面跳轉

store/index.js

根目錄下創建store，里面的index.js，這里參考vuex

import Vue from 'vue' import Vuex from 'vuex' import storage from '../common/storage'Vue.use(Vuex);const store = new Vuex.Store({// 屬性值state: {users: storage.getJson("users")},// 對外方問state屬性內容getters: {getCart: state => {let users = storage.getJson("users");if(users == null){return 0;}return users.shop_count;}},// Mutation 必須是同步函數// 更改state屬性內容// 使用：this.$store.commit("setUserInfo",{ });mutations: {UPDATEUSERS(state, data){state.users = data;storage.setJson("users",data);},DELETEUSERS(state,name){state.users = null;storage.remove(name);},UPDATECART(state, data){state.users.shop_count = data;let users = storage.getJson("users");users.shop_count = data;storage.setJson("users",users);}},// Action 可以包含任意異步操作// 通過 context.commit 可以方問mutations方法// 也可以獲得getters內容// 通過 this.$store.dispatch("getUser") 來取得內容actions: {getCart(context){},usersStatus(context){return new Promise(function (resolve, reject) {if(storage.getJson("users") == null){reject();}else{resolve();}});}} })export default store

• 參考vuex使用方式

這是比較全面的文件，大家可以根據自己的情況來引入文件，如果只是單單的接口請求，那就上面的幾個文件，擴展文件不用即可。

總結

以上是生活随笔為你收集整理的uniapp封装request的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。