【uniapp】十分钟带你封装uniapp的api请求

前言

      由于uniapp的请求方式和小程序类似的，很多人会觉得我为啥不直接用uni.request方法去请求呢！！

      这个方法确实很简单，每个页面都可以单独写请求方式，但是如果有重复的接口请求呢？如果后期要改某一个地方的接口请求呢？这样就会给我们带来不小的工作量，可能改完一个地方，另外一个地方就忘了。

      为了解决这种问题，我们可以把所有接口都封装起来，页面上做的事情就是纯粹的请求、传参、拿到结果。

封装前的准备

👉 先在项目目录上右键 - 新建目录（用于存放封装的API请求文件） 

• 名称大家可以随意取，我这里给的是request

👉 目录新建完成之后，还需要至少两个js文件 

•  index.js 封装get、post请求，接收参数并返回数据
• api.js 封装后台接口，便于页面调用和后期维护

为啥这里说的是至少两个js文件呢？那是因为可能因为权限的原因，亦或者模块的分类等，可以把api.js文件给拆分出去，按照不同的权限、模块来进行分类，最终可以通过一个总的js文件合并，这样更利于后期维护。 

封装第一步：index.js 

👉 定义请求参数 

• 必备参数：url、method、header、data
• 可选参数：hideLoading 

export default class Request {
    http(param) {
        let url = param.url;
        let method = param.method;
        let header = param.header || {};
        let data = Object.assign(param.data || {});
        let hideLoading = param.hideLoading || false;
        // 第一步的代码均在此处展示，后面示例代码就不写外层 class 和 http方法了。
        ....
    }
}

• hideLoading主要是后面用于显示加载toast状态的

👉 请求地址 

• 其实请求地址可以单独封装成一个js文件的，比如开发环境、正式环境、测试环境都用不同的请求地址。
• 这里仅仅展示一个请求地址！ 

let requestUrl = 'https://www.juejin.cn/' + url;

👉 请求方式

• 此处仅封装GET、POST两种方式，其他的请求方式可以根据需求去进行封装

if (method) {
    if (method == "POST") {
        header = Object.assign({
            'content-type': "application/x-www-form-urlencoded"
        }, param.header)
    } else {
        header = Object.assign({
            'content-type': "application/json"
        }, param.header)
    }
}

• method参数必须是大写的哦~（微信小程序和uniapp均有文档查阅）

• 将content-type和用户传递的header数据进行合并，组成一个新的header参数

👉 请求加载（这里是可选的配置项）

• 数据配置完成后，可以给用户一个loading的等待效果 

if (!hideLoading) {
    uni.showLoading()
}

 👉 返回Promise

• 通过promise返回数据，可以在页面上请求接口的时候，直接使用.then来拿到数据（也算是目前前端常用的写法了吧）

return new Promise((resolve, reject) => {
    uni.request({
        url: requestUrl,
        data: data,
        method: method,
        header: header,
        success: (res) => {
            // 下面会直接写请求成功的代码
            ......
        },
        fail: (err) => {
            // 下面会直接写请求失败的代码
            ......
        },
    })
})

• 在promise中写上请求方法，并接收上面定义的参数

// success里面的逻辑代码

// 如果有显示loading的话，可以在这里选择隐藏
if (!hideLoading) {
    uni.hideLoading();
}

// 判断请求是否成功（通过后端接口返回的状态进行判断）
// code：0 即成功，不为 0 的话就是请求错误/失败
if(res.data.code === 0){
    resolve(res.data)
    return true
} else {
    if(res.data.code === -1){
        // 这里是由于token过期导致的错误码
        // 可以直接跳转到login页面，也可以直接刷新token
        uni.navigateTo({
            url: '/pages/login/login'
        })
    }
    // 其他错误时，直接通过toast提示
    uni.showToast({
        title:res.data.msg,
        icon:'none'
    })
    return false;
}

// fail里面的逻辑代码

// 如果有显示loading，同样需要隐藏
if (!hideLoading) {
    uni.hideLoading();
}
return false;

 封装第二步：api.js

👉 引用封装好的index.js文件 

import Request from './index.js'
let request = new Request().http

 👉 get、post请求方法

function get(url, data, hideLoading, header) {
  return request({
    url: url,
    method: 'GET',
    data: data,
    header: header
  })
}
 
function post(url, data, hideLoading, header) {
  return request({
    url: url,
    method: 'POST',
    data: data,
    header: header,
    hideLoading: hideLoading,
  })
}

 👉 封装api对象

• 通过上面的方法，来确定请求类型

let api = {
  login: data => post('loginapi', data, true, true)
}
 
export default api;

 封装第三步：main.js

• 为了能够在全局进行使用，需要在main.js文件中进行配置
• $http是自定义名称，可以根据自己的需要去修改
• 在引入文件中，我们只需要引入api.js即可 

import api from "./request/api.js"
Vue.prototype.$http = api;

 使用方法

onLoad(){
    this.$http.login().then(res=>{
        console.log(res)
    })
}

•  在页面上使用的时候，直接通过this.$http找到对应的api方法
• 如果需要传参，可以在login方法中直接传递login({name: 'xxx', sex: 'yyy'})

总结 

      在uniapp中封装请求方法，其实和vue里面的axios封装方式差不多，通过一次封装，改变之后的开发模式和维护成本是很重要的。