uni-app封装网络请求（下）

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

接文章uni-app封装网络请求（上），本篇主要解释如何详细封装网络请求。

前提

Promise是一种常用的异步解决方案，解决回调地狱的问题。有了Promise对象，就可以将异步操作以同步的操作的流程表达出来，避免了层层嵌套的回调函数。

uni-app中uni.request()可以发送异步网络请求。实际开发时我们使用本地的请求地址，而在项目上线时会使用线上的地址，并且每个请求所含的参数和请求方式都不大相同，那么在开发时就可以使用Promise对请求进行封装。

简单实现

文章封装网络请求（上）已经讲述了关于请求配置config的一些内容，下面主要讲述request的配置：

• options 对请求参数的封装，主要包含内容可以参考官网对于uni.request(OBJECT)中的参数配置。

• Promise 网络请求，发送请求过程中的操作，下面主要是纯净版的发送请求。

request(options) {
        if(!options) {
                options = {}
        }
        options.baseUrl = options.baseUrl || this.config.baseUrl
        options.dataType = options.dataType || this.config.dataType
        options.url = options.baseUrl + options.url
        options.data = options.data || {}
        options.method = options.method || this.config.method

        //基于Promise 的网络请求
        return new Promise((resolve, reject) => {
                uni.showLoading({
                        title:'加载中...'
                });
                let _config = null
                // 请求完成时的操作
                options.complete = (response) => {
                        uni.hideLoading();
                        let statusCode = response.statusCode
                        response.config = _config
                        if(process.env.NODE_ENV === 'development') {
                                if(statusCode === 200) {
                                        // 对返回数据做预处理
                                } 
                        }


                }
                // 将请求配置和请求参数放到目标对象_config中去
                _config = Object.assign({}, this.config, options)  
                console.log('test',_config)
                uni.request(_config);  // uni-app请求方法使用

        })	
}

返回状态码不同情况的处理

有些情况下，前端发送的请求，后台因为某些情况会有不同的状态返回，为了给用户更好的体验，通常我们要针对不同情况做合理的处理。比如：当请求返回400请求报文存在语法错误时，需要告知用户需要 reLaunch 到登录页。

let { code, msg } = response.data   // 假设后台返回的数据格式是这样的

// 不同状态码，提示不同的错误，这里需要要后台人员沟通商定。
if (response.data.code == 400) {
        setTimeout(() => {
                uni.reLaunch({
                        url: '/pages/public/login'
                })
        }, 1000)
        reject(response)
} else if (code == 0) {
        tool.msg(msg)
        resolve(response.data)
} else {
        resolve(response.data)
}

统一接口管理

在api文件夹下新建index.js文件, 统一存放接口地址, 以方便后期维护。具体代码如下：

import http from './request'
const apiList = {
        // 接口地址
        postList: (data) => {
            return http.request({
                url:'/posts',
                method: 'GET',
                data
        })
    }
}

export default apiList

具体使用

结合 uni-app封装网络请求（上）,具体使用方法如下：

- 在main.js中引入

import api from '@/api' 
Vue.prototype.$api = api

import global from './api/global.js'
Vue.prototype.global = global

- 页面 index.vue中使用

onLoad() {
       this.loadList()
},
methods: {
    loadList() {
            this.$api.postList().then(res => {
                    console.log('test',res)
            }).catch(err => {
                    console.log(err)
            })
    }
}

- 效果

可以在调试器network中看到发送的请求。