uniapp 封裝 request 並 配置跨域，（ 本地 + 線上 + 封裝 ）

 

 

找到上面這個 文件，不管是用 命令創建 還是 用 HBX 創建，都一樣會有這個文件的，然后跟着截圖復制粘貼就好了。

// 這是配置本地能跨域的，或者你可以直接讓后端給你設置請求頭，避免了跨域。

"devServer" : {
            // "disableHostCheck" : true, //禁止訪問本地host文件 ( 個人建議注釋掉這一行，不然很有可能會請求不到 )
            // "https" : true,
            // "port" : 8080,
            "proxy" : {
                "/api" : {
                    "target" : "http://192.168.0.202:8080", //這里使用后端服務器的地址
                    "changeOrigin" : true, //是否跨域
                    "secure" : true, // 是否支持 https 協議的代理
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        }

 

// 配置線上的文件環境，如圖所示。

 

 

 

在根目錄底下，創建一個 vue.config.js 文件，內容如下。 依舊是復制粘貼 改 地址就好。

module.exports = {  
    /* 部署生產環境和開發環境下的URL：可對當前環境進行區分，baseUrl 從 Vue CLI 3.3 起已棄用，要使用publicPath */  
    publicPath: "",  
    assetsDir: "static/lipin",  
    outputDir: "dist",  
    runtimeCompiler: true,  
    productionSourceMap: false,  
    /* webpack-dev-server 相關配置 */  
    "devServer" : {
        // "disableHostCheck" : true, //禁止訪問本地host文件
        // "https" : true,
        // "port" : 8080,
        "proxy" : {
            "/api" : {
                "target" : " 后端接口地址 ",
                "changeOrigin" : true, //是否跨域
                "secure" : true, // 是否支持 https 協議的代理
                "pathRewrite" : {
                    "^/api" : ""
                }
            }
        }
    } 
}  

 

不封裝方法的話可以立馬看見效果

uni.request({
                    url: '/api/auth/login',
                    method:'post',
                    data: this.login
                }).then(data=>{
                    console.info(data[1].data)
                    // uni.redirectTo({
                    //     url : '../homePage/index',
                    // })
                    this.$refs.uTips.show({ title: '登陸成功', type: 'success', duration: '2300'})
                }).catch(()=>{
                    this.$refs.uTips.show({ title: '登錄失敗', type: 'success', duration: '2300'})
                })

 

 

 

再之后封裝 request 文件 , 在根目錄下 創建一個 units 文件夾，文件夾底下再創建一個 request.js 文件

 

 

 

export default function request(config) {
    let Authorization = uni.getStorageSync('token')
    let bserUrl = ""
    bserUrl = `/api${config.url}`
    config.url = bserUrl
    config.header = {
        "Authorization": Authorization
    }
    config.hasLoading = true
    if (config.hasLoading) {
        uni.showLoading({
            title: '加載中...'
        })
        uni.showNavigationBarLoading()
    }
    return new Promise((resolve, reject) => {
        uni.request({
            ...config,
            success: (res) => {
                uni.hideLoading()
                uni.hideNavigationBarLoading()
                // resolve(res.data.data)
                const {
                    code,
                    data,
                    message
                } = res.data
                switch (code) {
                    case 200:
                        if (data) {
                            return resolve(res.data)
                        } else {
                            uni.showToast({
                                title: message,
                                icon: 'none'
                            })
                        }
                        break;
                    case 201:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                    case 500:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                    case 503:
                    case 5002:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                        break;
                    case 5000:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                        uni.redirectTo({
                            url: '/pages/login/index'
                        })
                        break;
                    case 7004:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                        break;
                    case 7006:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                        break;
                    case 7007:
                        uni.showToast({
                            title: message,
                            icon: 'none'
                        })
                        break;
                }
            },
            fail: (rej) => {
                uni.hideLoading()
                uni.hideNavigationBarLoading()
                uni.showToast({
                    title: "服務器出錯",
                    icon: 'none'
                })
                reject(rej)
            }
        })
    })
}

 

 最后再 自己寫個 js 文件，封裝 方法

 

 

 

import request from "@/utils/request.js"

//賬號密碼登錄
export function adminLogin(data){
    return request({
        url : '/auth/login',
        method :'post',
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        data : data
    })
}

 

 

 最后丟到 vue 文件中 就行。

import { adminLogin } from '@/api/index.js'

 

如果方法不封裝的話，就可以直接引用

uni.request({
                    url: '/api/auth/login',
                    method:'post',
                    data: this.login
                }).then(data=>{
                    console.info(data[1].data)
                    // uni.redirectTo({
                    //     url : '../homePage/index',
                    // })
                    this.$refs.uTips.show({ title: '登陸成功', type: 'success', duration: '2300'})
                }).catch(()=>{
                    this.$refs.uTips.show({ title: '登錄失敗', type: 'success', duration: '2300'})
                })

 

封裝了之后

adminLogin(this.login).then(res=>{
                    console.info(res)
                }).catch(()=>{
                    console.info('test1223')
                })