uni-app项目封装http请求和不封装请求

一、封装方法1（_gt和_mt类型）

1.在根路径下新建config基路径文件夹，新建index.js文件用于封装基路径

//在config/index.js
// 请求的基本路径
const baseURL = process.env.NODE_ENV === "development" ?
"http://192.168.1.188:8080"://测试环境(请求接口的代理路径)
"http://zxwyit.cn:8080";//上线环境

export {baseURL}

2.在根路径下新建uilt文件夹，新建http.js文件用于封装请求

// 引入基路径
import {
    baseURL
} from "@/config/index.js"

const http = uni.$u.http

// 初始化请求配置
http.setConfig((config) => {
    /* config 为默认全局配置*/
    config.baseURL = baseURL /* 根域名 */
    config.header = {//设置请求头类型，这里是form类型，要看接口文档才能确定是什么类型
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
    return config
})

// 请求拦截
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
    let strUser = uni.getStorageSync("user")//"user"是登入成功后存储的用户信息，存储为了字符串
    let objUser = strUser ? JSON.parse(strUser) : {}//判断存不存在user，转为对象形式，否则{}，{}是为了防止空指针
    config.header.accessToken = objUser.accessToken;//获取token值
    return config
}, config => { // 可使用async await 做异步操作
    return Promise.reject(config)

})


// 响应拦截
http.interceptors.response.use((response) => {
    /* 对响应成功做点什么 可使用async await 做异步操作*/
    let data = response.data//这里做浅解，可以做也可以不做，做了以后请求数据后赋值就少写一个data
    const {
        errmsg,
        errno
    } = data;
    if (200 !== errno) {
        return Promise.reject(data); //返回错误，通过catch来处理错误
    }
    return data
}, (response) => {
    // 对响应错误做点什么 （statusCode !== 200）
    return Promise.reject(response)
})
//封装post请求
function post(_gp, _mt, data = {}, params = {}) {
    return http.post("/m.api", {
        _gp,
        _mt,
        ...data
    },{
        ...params
    })
}
//封装get请求
 function get(_gp, _mt, params={}) {
    return http.post("/m.api", {
        _gp,
        _mt,
        ...params
    })
}
//暴露封装的函数
export {post,get}

1. 使用

在页面文件中

import {post,get} from "@/uilt/http.js"//引入封装的请求方式
//第一个参数是_gt,第二个参数是_mt，第三个参数是需要传递的数据
login(){
    let data ={
        phone:this.phone
        password:this.password
    }
    post("user", "login", data).then(res => {
        console.log(res, "登入成功");
        uni.showToast({
            icon: "success",
            title: res.data.errmsg,
            duration: 1000
        })
        setTimeout(function() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        }, 1000);
    }).catch(err => {
        uni.showToast({
            icon: "error",
            title: err.errmsg,
            duration: 1000
        })
    })
}

4.说明

该请求的封装方式适用于_gt、_mt类型的请求，应该也可以做到其他类型；

注意看代码中的注释

二、封装方法2（常见类型）

1. 在根路径下新建uilt文件夹，新建api.js用于封装请求的路径和新建http.js用于封装请求

在uilt/api.js中

const url = "http://localhost:8086/"//设置基路径（代理路径）
// 登入页面相关的所有接口
//登入
export const loginpath = url + "login"
// 退出登入
export const logoutpath = url + "logOut"
// 注册
export const registerpath = url + "user/register"

在uilt/http.js中

// 封装请求
function request(url,method = "get",data = {}) {
    return new Promise((resolve, reject) => {
        uni.request({
            url,
            data,
            method,
            header: {
                // 'Accept': '*/*',
                // 'Content-Type': 'application/json',//类型
                "Authorization": uni.getStorageSync('token')//请求头
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

export {
    request
}

2.使用

在页面文件中

<script>
import {request} from '../../utils/http.js'//引入封装请求
import {loginpath,registerpath,orderpath} from '../../utils/api.js'//引入请求路径

export default {
        data() {
            return {
                userName: "admin",
                passWord: "123456",
                bool: true
            }
        },
        onShow() {
            // this.init()
        },
        methods: {
            //登入点击事件
            userPath() {
                const userName = this.userName
                const passWord = encrypt(this.passWord) //加密处理
                //第一个参数是请求的路径，第二参数是请求方式，第三个参数是需要传递的数据
                request(loginpath, "post", {
                    userName,
                    passWord
                }).then(res => {
                    if (200 == res.statusCode) {
                        uni.setStorageSync('token', res.data.accessToken)
                        uni.switchTab({
                            url: '/pages/user/user'
                        })
                    } else {
                        uni.showToast({
                            title: res.data,
                            duration: 500
                        })
                    }
                })
            }
        }
    }
</script>

三、不封装请求

说明

注意看代码中的注释；不封装需要使用 uni.request这个API来进行请求

// 注册
registerUser(){
    let data = {
        phone:this.form.phone,
        password:this.form.password,
        verifyCode:this.verifyCode
    }
    if(data.password==''||data.verifyCode==''||data.phone==''){
        uni.showToast({
            icon: "error",
            title: "验证码/手机号/密码不能为空",
            duration: 1000
        })
        return
    }
    uni.request({
        url: 'http://192.168.1.188:8080/m.api',//请求路径
        data: {//传递的数据
            _gp: "user",
            _mt: 'register',
            ...data
        },
        method: "POST",//请求方式
        header: {//请求头配置
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//设置请求类型，到接口文档中找
            "AccessToken":uni.getStorageInfoSync("token")//根据需求是否需要添加token
        },
        success: (res) => {//请求成功后的回调
            let data = res.data
            console.log(res, "注册成功");
            if (200 === data.errno) {
                this.verifyCode = data.data
            }else{
                uni.showToast({
                    icon: "error",
                    title: data.errmsg,
                    duration: 1000
                })
            }
        },
        fail: (err) => {//请求失败后的回调
            uni.showToast({
                icon: "error",
                title: err,
                duration: 1000
            })
        }
    })
}