uniapp 请求封装

1、utils文件夹下新建request.js

// 此vm参数为页面的实例,可以通过它引用vuex中的变量
import {baseUrl} from './baseUrl.js'
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = baseUrl; /* 根域名 */
        //config.baseURL = 'http://124.128.14.146:38004/fmis-api/'; /* 根域名 */
        return config
    })
    
    // 请求拦截
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
            uni.showLoading({
                title:'请求中'
            })
            let mpopenId = uni.getStorageSync('mpopenId')
        // 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
        config.data = config.data || {}
        // 根据custom参数中配置的是否需要token,添加对应的请求头
        if(config?.custom?.auth) {
            // 可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中
            config.header.token = vm.$store.state.userInfo.token
        }
        if(mpopenId){
            config.header.openId = mpopenId
        }
        return config 
    }, config => { // 可使用async await 做异步操作
        return Promise.reject(config)
    })
    
    // 响应拦截
    uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
        uni.hideLoading()
        const data = response.data
        //console.log(data,data.code,'request')
        // 自定义参数
         // const custom = response.config?.custom
        if (data.code == 0) {
            //console.log(data,'00')
            // return uni.showToast({
            //  title:data.message,
            //  icon:'none'
            // })
            return data 
        }else{
            return data.data  ? data.data : data
        }
        
    }, (response) => { 
        uni.hideLoading()
        // console.log(response,'报错')
         uni.$u.toast("请求失败")
        // 对响应错误做点什么 (statusCode !== 200)
        return Promise.reject(response)
    })
}

2、在main.js文件引用

const app = new Vue({
  ...App
})
require("./utils/request.js")(app)
app.$mount()

3、定义使用

export const getData= (params, config = {}) => uni.$u.http.post('/a/getData', params, config)

在页面使用时

import { getData } from '@/api/index.js'
async loadDays() {
  let res = await getData ({})
  console.log(res, 'res')
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容