【uniapp】请求封装

Y.哈哈

已于 2022-07-19 17:01:13 修改

阅读量258

点赞数

分类专栏： uniapp 文章标签：前端 vue.js javascript 小程序

于 2022-07-19 16:31:50 首次发布

本文链接：https://blog.csdn.net/u012597989/article/details/125875062

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中封装网络请求，使用uni.request进行HTTP操作，并展示如何在`request.js`中处理不同状态码的响应。同时，通过`api.js`模块将API接口统一对外提供，便于在`page.vue`中调用并处理数据。

摘要由CSDN通过智能技术生成

// 封装请求 request.js
const baseURL = "www.yhaha.com"
const service = (option) => {
    option.url = `${baseURL}${option.url}`
    option.header = {
        'token': uni.getStorageSync(token)
    }

    return new Promise((resolve, reject) => {
        uni.request(option).then((response) => {
            let [error, res] = response
            console.log('requestError:', error)
            
            switch (res.statusCode) {
                case 200:
                    if (res.data.errorMessage) {
                        uni.showToast({
                            title: res.data.errorMessage,
                            icon: 'error'
                        })
                    } else {
                        resolve(res.data)
                    }
                    break
                case 401:
                    console.log('401')
                    break
                // ...
            }
        }).catch(error => {
            console.log('catchError:', error)
            let [err, res] = error
            reject(err)
        })
    })
}
export default service

// 封装API api.js
import request from '@/utils/request.js/'

export default {
    getData(data) {
        return request({
            url: "/data",
            method: "POST",
            data
        })
    },
    // ...
}

// 挂载全局 main.js
import api from '@/utils/api.js';

Vue.prototype.$api = api

// 发起请求 page.vue
this.$api.getData(data).then((res)=>{
    // ...
})