在Hbuilder的MUI项目中如何封装API请求

一、为什么要封装请求

在一个网页 / APP中，会有大量的请求需要发送、处理。发送请求、处理的代码中，有一部分是固定写法，不需要变动。如果每次写请求时都完整地写一遍，将会耗费大量时间，且代码量会增多，会导致开发效率降低，因此需要封装请求，实现请求的多次复用。

二、如何封装请求

2.1 在项目中创建一个文件用于封装请求

在项目的根目录中，创建一个名为api的文件夹，在api文件夹中创建一个request.js文件。

2.2 编写函数

定义一个函数request，接收一个参数option，代码如下

function request(option){

}

这里对option参数的作用做一下说明，option的作用是后续使用这个封装的请求时，我们将一些需要动态修改的参数传入进函数（比如url、请求类型、请求体）

因为API请求是一个异步操作，所以我们需要使用到Promise对象（如果不知道什么是Promise对象，可以问一问GPT），Promise对象返回两个状态（参数）：成功和失败，因此需要在里面的回调函数传递两个参数resolve和reject，代码如下：

function request(option){
    return new Promise((resolve, reject)=>{
        
    })
}

在Promise对象里面，我们可以发送请求，并对option传递的参数进行处理，代码如下

function request(option){
    return new Promise((resolve, reject)=>{
        let headers = option.headers
        // 如果没有传入headers，则设置headers为空
        if(!headers){
            headers = {}  
        }
        //如果请求的不是登录接口，则在请求头携带token
        if(option.url!='/login'){
            headers = Object.assign(headers, {'Authorization', localStorage.getItem('token')}
        }
        mui.ajax('http://192.168.1.1:10001' + option.url, {  // 服务器地址是固定的，传入的option中的url为接口地址，对两者进行拼接
            type: option.type?option.type:'GET',  // 请求类型，如果没有传入这个参数，默认为GET
            data: option.data,  // 请求体，携带的数据
            headers: headers,    // 请求头
            success: function(e){
                resolve(e)  // 当请求成功时，返回数据
            },
            error: function(e){
                reject(e)  // 当请求失败或出现错误时，返回错误内容
            }
        }
    })
}

三、如何使用封装的请求

request({
    url: '/login',
    data: {
        username: 'user',
        password: '123456'
    },
    type: 'POST',
    headers: {'Content-Type': 'application/json'}
})
.then(response=>{
    // 这里写请求成功时执行的操作
})
.catch(error=>{
    // 这里写请求失败时执行的操作
})