uniapp vue3 创建uview拦截器

一、uniapp vue3引入uview

https://www.cnblogs.com/zhangyouwu/p/18911765

1.创建接口配置文件/common/api/api.js

const install = (Vue, vm) => {
    const http = uni.$u.http
    var jk={};
    //按自己的需求填写
    // //Login
    // jk.phone_bind = (params) => http.post('/api/login/phone_bind', params)//绑定手机
    // jk.get_user_by_openid = (params) => http.post('/api/login/get_user_by_openid', params)
    // //协议
    // jk.agreement_detail = (params) => http.post('/api/agreement/agreement_detail', params)//协议
    // //App.vue
    // jk.openid_get = (params) => http.post('/wechat/wechat/openid_get', params)//openid
    // jk.send_sms = (params) => http.post('/api/login/send_sms', params)//发送验证码
    
    // jk.get_user_by_id = (params) => http.post('/api/user/get_user_by_id', params)
    
    uni.$u.api = jk;
    
}

export default {
    install
}

2.创建服务器接口配置地址文件/common/api/baseUrl.js

const CONFIG = {
    //开发环境配置
    development: {
        
        baseUrl: 'https://xxx.xxx.com', // 后台接口请求地址
        qnyUrl: 'https://xxx.com', // 七牛云请求地址
        
        websocketUrl: '', // websocket服务端地址
        
    },
    //生产环境配置
    production: {
        baseUrl: 'https://xxx.com', // 后台接口请求地址
        qnyUrl: 'https://xxx.com', // 七牛云请求地址
        websocketUrl: '', // websocket服务端地址
    }
}
export default CONFIG[process.env.NODE_ENV]

 

 3.创建拦截器文件/utils/request/index.js

// 引入配置
import $config from '@/common/api/baseUrl.js'
// 引入拦截器配置
import {requestInterceptors,responseInterceptors} from './interceptors.js'
// 引入luch-request
import { http } from '@/uni_modules/uview-plus'
//  初始化请求配置
const initRequest=(vm)=>{
    http.setConfig((defaultConfig) => {
        /* defaultConfig 为默认全局配置 */
        defaultConfig.baseURL = $config.baseUrl /* 根域名 */
        defaultConfig.qnyUrl = $config.qnyUrl; /* 接口地址 */
        return defaultConfig
    })
    requestInterceptors()
    responseInterceptors()
}
export {
    initRequest
}

创建拦截器文件/utils/request/interceptors.js

import { http, toast} from '@/uni_modules/uview-plus'
//import store from '@/store'
const requestInterceptors=(vm)=>{
    /**
     * 请求拦截
     * @param {Object} http
     */
    http.interceptors.request.use((config) => { // 可使用async await 做异步操作
        // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
        config.data = config.data || {}
        let pages = getCurrentPages();
        // console.log("eeee",pages)
        // console.log("eeee",config)
        if(pages.length>0){
            
            // 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
            let no_auth=[];
            //no_auth.push('/api/user/get_user_by_id');
            // no_auth.push('/wechat/wechat/openid_get');//获取openid
            // no_auth.push('/api/login/send_sms');//发送短信
            // no_auth.push('/api/login/get_user_by_openid');//根据openid获取用户信息
            // //no_auth.push('/api/user/get_user_by_id');//根据id获取用户信息
            // no_auth.push('/api/login/phone_bind');//绑定手机号
            

            // no_auth.push('/api/version/get_version');
            // no_auth.push('/api/agreement/agreement_detail');
            // no_auth.push('/api/login/member_pwd_change');

            if(no_auth.indexOf(config.url)!==-1){
                
            }else{
                // let user_info = uni.getStorageSync('user_info');
                // //console.log(user_info);
                // if(!user_info){
                //     //uni.hideLoading();
                //     let url_arr=[];
                //     //首页api
                //     //url_arr.push('/api/college/college_list');
                    
                //     if(url_arr.indexOf(config.url)!=-1){
                        
                //     }else{
                //         console.log("错误地址：",config.url);
                //         return false;
                //     }
                    
                // }else{
                //     if(user_info.xx_status==0){//未绑定手机号
                //         uni.navigateTo({
                //             url:'/pages/login/bind-phone'
                //         })
                //     }
                //     if(!config.data){
                //         config.data={};
                //     }
                //     var xcx = uni.getStorageSync('xcx');
                //     config.data.user_id=user_info.id;
                //     config.data.xcx_id=xcx.id;
                // }
            }
        }
        return config
    }, (config) => {
        console.log("请求拦截失败");
        uni.showToast({title:'请求拦截失败',icon:'none'});
        return false
        //Promise.reject(config)
    })// 可使用async await 做异步操作
        
}
const responseInterceptors=(vm)=>{
    /**
     * 响应拦截
     * @param {Object} http 
     */
    http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
        const res = response.data
        // res为服务端返回值，可能有code，result等字段
        // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
        // 如果配置了originalData为true，请留意这里的返回值
        //return res.result
        if (res.code == 0 || res.code == 1 || res.code == 2) {
            return res
        } else if (res.code == -1) {
            uni.showToast({title:res.msg,icon:'none'});
            return false
        } else {
            // 如果返回false，则会调用Promise的reject回调，
            // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
            return false
        }

    }, (response) => { /*  对响应错误做点什么 （statusCode !== 200）*/
        console.log("请求地址失败",response);
        //uni.hideLoading();
        uni.showToast({title:'请求地址失败',icon:'none'});
        return false
    })
}


export {
    requestInterceptors,
    responseInterceptors
}

 

4.main.js引入相关

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
// //http接口API集中管理引入部分
import httpApi from '@/common/api/api.js'



import uviewPlus from '@/uni_modules/uview-plus'
// http拦截器，
import {initRequest} from './utils/request/index'

export function createApp() {
    const app = createSSRApp(App)
    
    // 引入请求封装
    initRequest(app)
    
    
    app.use(uviewPlus)
    app.use(httpApi)
    //console.log("222",uni.$u.config.v);
    return {
        app
    }
}
// #endif

 

5.页面调用

var post_obj={};
post_obj.user_id=100;//user_id

uni.$u.api.major_home_list(post_obj).then(res => {
    console.log(res);
                            
})