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')
                })