日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

uni-app發送請求封裝

作者:程序猿向前跑 更新時間: 2022-08-13 編程語言

我們自己寫項目時候可以不需要封裝。封裝其實也是對自己的一種提高吧。哈哈哈哈。
1、封裝成一個方法后,以后想要發送請求就直接調用這個方法,這樣所有的請求都走這個方法,就可以對所有的請求做一個攔截,

2、另外,接口的域名不管要使用多少次都是一樣的,難以維護,提高代碼的可復用性

const BASE_URL = 'http://localhost:8082'
// 通過export向外暴露一個方法,方法名叫myRequest,調用myRequest方法時會向方法中傳遞一個對象options
export const myRequest = (options)=>{  
    return new Promise((resolve,reject)=>{  // 異步處理的封裝通過promise比較好,并且要return出去,
        uni.request({  // 在回調函數中處理異步請求
            url: BASE_URL + options.url,  // 將接口地址分為兩部分,這樣如果域名改變了好維護,接口地址從options中獲取
            method: options.method || 'GET', // 方法從options中獲取,如果沒有傳入method,則默認為GET,
            data: options.data || {},  // data從options中獲取,如果沒有傳入data, 則默認一個空對象
            success: (res) => {  // 用箭頭函數,res是返回來的數據
                if(res.data.status !== 0){  // 如果請求失敗,則給一個提示
                    return uni.showToast({
                        title: '獲取數據失敗!'
                    })
                }
                resolve(res)  //如果請求成功,調用resolve返回數據
            },
            fail: (err)=>{ // err 是返回來的錯誤信息
                uni.showToast({  // 給一個消息提示
                    title: '請求接口失敗!'
                })
                reject(err) // 調用reject方法把錯誤消息返回出去
            }
            
        })
    })
}

這個方法可能每個頁面都會用到,我們可以在main.js中引入,

import { myRequest } from ‘./util/api.js’
接收之后,掛載到全局,這樣所有的頁面都可以調用這個方法

Vue.prototype.$myRequest = myRequest

使用方法:使用this.$myRequest進行調用

onLoad() {
            this.getSwipers()
        },
        methods: {
            // 獲取輪播圖數據
            async getSwipers(){
                // uni.request({
                //     url: 'http://localhost:8082/api/getlunbo',
                //     method: 'get',
                //     success:(res)=>{
                //         console.log(res)
                //         if(res.data.status !== 0){
                //             return uni.showToast({
                //                 title: '獲取數據失敗!'
                //             })
                //         }
                //         this.swipers = res.data.message
                //         
                //     }
                // })
                const res = await this.$myRequest({url: '/api/getlunbo'})
                console.log(res)
                this.swipers = res.data.message
            }
            
        }

原文鏈接:https://blog.csdn.net/qq_46199553/article/details/126307381

欄目分類
最近更新