1. 程式人生 > >Vue接口日常學習

Vue接口日常學習

轉換 string類 sync page 封裝 密碼 pro 我們 獲取

最近使用uni.app 進行app的開發 頁面搭完之後,發現不會調節,今天特意學習了下

  各個程序運行時,都會發起網絡請求,網絡相關的API在使用之前都會在使用前配置域名白名單

  首先 現在中間件上一個promise封裝uni-app的reque方法,定義一個基礎地址,然後可以在API中鏈接地址的時候進行一個拼接,基礎地址就是大家公用的一個地址,然後可以用不同的api router去拼接這個基礎地址,在通過獲取方法method,請求的參數data去訪問不同服務器地址裏面的內容,發起網絡請求成功後會返回一個success,返回一個參數data,他裏面就是服務器返回的數據,其中最後發送給服務器的會是一個String類型,如果傳入的data不是string類型,會被轉換成一個string類型,method的獲取方法有比較常見的‘get’ ,‘post’還有put delete等,最常見的就是get post 但是一定要記住post要傳參數

  其次在API的文件夾中創建一個你要用來使用的API 包含你的需要歐新接的地址 參數 方法

  最後在中間件在創建一個中間件,使用API中的方法,參數,然後return 其中若是參加了參數拼接的話 可以采用一個二次命名把,例如 api.secondDetailTop.router = "/house/second/headInfo/" api.secondDetailTop.router =`${api.secondDetailTop.router}${data}`

說起傳參就不得不說這些方法了

  1.uni-app本身的uni.navigation 例如我想跳到反饋的頁面 一個點擊事件 然後

tofeadBack(){ uni.navigateTo({ url:‘ /pages/self/feadBack’}) }, 這樣就可以正常跳轉到反饋的頁面了,但是如果需要傳參數的話 就需要我們經常使用的那個拼接了

    技術分享圖片拼接參數id num 技術分享圖片跳轉到的頁面打印獲取參數的內容

    技術分享圖片成功獲取到參數並且拼接成功技術分享圖片打印出傳參內容

    2.  uni.getStorage uni.setStorage

      uni.setStorage 將數據存儲在本地緩存中指定的 key 中,會覆蓋掉原來該 key 對應的內容,這是一個異步接口。 key 本地緩存中指定的key data 需要存儲的內容 success 接口調用成功的回調函數 fail 接口調用失敗的回調函數

      uni.getStorage 從本地緩存中異步獲取指定key對應的內容

        個人理解就說來說 通過setStorage將數據存儲在指定的key中 然後就在通過getStorage 用key來獲取他 就相當於將物品放到一個密碼為123的密碼箱中,想要獲取他就必須輸入密碼為123一樣 例如

      技術分享圖片 技術分享圖片 技術分享圖片

      將data裏的hello緩存在key為storage_key中 獲取key為storage中的data 應拿到hello 測試結果

      接觸到這種獲取方法之後我看了一遍uni-app文檔 還發現了不僅僅有這個異步的還發現了同步的uni.setStorageSync(key,data)將 data 存儲在本地緩存中指定的 key 中,會覆蓋掉原來該 key 對應的內容,這是一個同步接口                 =====>>uni.setStorageSync(‘storage_key‘, ‘hello‘);

        and

      uni.getStorageSync(key)從本地緩存中同步獲取指定key對應的內容=========>> const value = uni.getStorageSync(‘storage_key‘); console.log(value);

3.通過vue獲取 在vue文件中引入vue

  

Vue接口日常學習