uniapp封装request请求(详解版)_uniapp 封装request

1.简单封装

在项目中创建一个utils工具类文件夹，并创建request.js文件。

request.js代码如下：

// const baseUrl = "http://127.0.0.1:8080/";
const baseUrl = 'http://localhost:1018'    //api的固定前部地址
export const request = (url,method,data) =>{
    return new Promise((resolve,reject) =>{
        uni.request({
            url: baseUrl + url,//拼接请求路径
            data: data,
            method: method,
            header: {
                'content-type': 'application/json',
                //token: uni.getStorageSync('token')!= null ? uni.getStorageSync('token'): ''//请求头发送token，可选
            },
            success: (res) => {
                resolve(res)
            },
            fail: (error) => {
                reject(error)
            }
        })
    })
}
 
//暴露函数
export default request

2.全局引入

在main.js文件引入request。

//request.js文件创建在utils文件夹下
import {request} from "./utils/request.js"
Vue.prototype.request = request

3.页面调用

此处提供一些发送请求的样例代码：

onLoad() {
            //发送get请求，没有传参
            this.request("/demo","GET",null).then(res=>{
                console.log(res)
            }).catch(err=>{
                console.log(err)
            })
   
           //单个参数
            this.request("/demo/getMessage","GET",{
                ill: "心脏病"
            }).then(res=>{
                console.log(res)
            }).catch(err=>{
                console.log(err)
            })
   
            //多个参数
            this.request("/demo/testTwo","GET",{
                name: "123456",
                age: 28
            }).then(res=>{
                console.log(res)
            }).catch(err=>{
                console.log(err)
            })
            
            //发送post请求，参数为object
            this.request("/demo/add","POST",{name: '张三', age: 12}).then(res=>{
                console.log(res)
            }).catch(err=>{
                console.log(err)
            })
            
            
        },

按照教程一步步做下来就可以正常使用啦~