web端与小程序请求封装(axios 和 uni-app)

web

如有不合理地方根据需求修改

• axios拦截器封装

  import axios from 'axios';


var ip = 'http://121.40.152.128:8090/'

//  node方法 获取环境是 开发环境还是线上环境
console.log('process.env')
console.log(process.env.NODE_ENV)

 
const service = axios.create({
   // 如果指定baseURL 那么请求中就会带上该ip，开发时一般不用，用proxy做跨域代理开发,要部署上线时指定服务器地址
   // baseURL: ip,  //请求地址   
    timeout: 5000 //超时时间
});



service.interceptors.request.use(config => {
    // 给需要带请求头的请求携带请求头
    // if (localStorage.getItem('token')){
    //     config.headers.authorization = localStorage.getItem('token')
    // }

    if (config.url.indexOf('login') !== -1 || config.url.indexOf('change-password') !== -1) {
        //是登录的请求就不带token

        config.headers = {
            "Content-Type": "application/json;charset=utf-8",
        }
    } else {
        //不是登录的请求就带上token
        config.headers = {
            "Content-Type": "application/json;charset=utf-8",
            'Authorization': localStorage.getItem('token')
        }
    }

    //处理前
    console.log(config)

    if(config.method === 'post' || config.method === 'put' || config.method === 'delete'){
        config.data = config.params
        config.params = {}
    }else{
        config.data = { ...config.params }
    }


    // config.method === 'post'
    //     ? config.data = config.params
    //     : config.data = { ...config.params };

    //处理后
    console.log(config)

    //开始加载动画
    // loadingInstance = Loading.service({
    //     text:'拼命加载中...',
    //     background:'rgba(255,255,255,.7)'
    // });

    // console.log(config)

    return config;    //返回结果
}, error => {
    Promise.rejecet(error);
});


service.interceptors.response.use(
    response => {
        console.log(response)
        //处理后端数据
        if (response.status === 200) {

            //关闭加载动画
            // loadingInstance.close()

            //在这里面可以做很多处理比如http状态码的判断,由于我比较懒就没弄
            return response.data;
        };

        //token过期 token失效 未登录
        // if(response.data.code === 401){
        //     console.log('401================');
        //     localStorage.removeItem('item')
        //     this.props.history.replace('/login')
        //     // message.error('请先登录')
        // }
    }

);


export default service;

• 请求封装使用

// 引入拦截器
import service from './requset'

//  调用拦截器封装模块暴露出的方法获取数据
export const reqLogin = params => {
    console.log(params)  //打印 data : {type:'1'}
    return service({
        //请求地址  这里只有路由后缀,因为到拦截器中地址会进行拼串,详情可以在拦截器模块中打印config查看
        url: '/web/public/v1/login',
        //请求方式
        method: 'post',
        //请求参数 这里说明 get请求接受的就是params post就是data 踩过坑了
        // params
        params
    })
}

小程序 (uni-app 其他封装也类似 根据自己实际情况修改)

• 请求封装 (请求和 上传 )

const baseUrl = 'http://xxx' //接口地址

/**
 * @param {url} 后缀
 * @param {method} 请求方式
 * @param {header} header
 * @param {data} 请求体参数
 * @param {success} 传数据回去的回调函数
 */
const http = ({url, method = 'GET', data = {},success,fail}) => {
    let tokenId = uni.getStorageSync('tokenId')
    
    // uni.showLoading({
    //  title:'加载中'
    // })
    
    return uni.request({
        url:`${baseUrl}${url}`,
        method,
        data:{data:data},
        header:{
            tokenId:tokenId
        },
        complete: (res) => {
            console.log('complete===')
            console.log(res)
            
            // uni.hideLoading()
            
            if (res.statusCode === 200) {
                //网络请求成功
                if (res.data.code == 'ACK') {
                    //接口数据请求成功 返回数据
                    success(res.data.data)
                } else {
                    //传一份错误提示回去在页面做处理
                    fail(res.data.message)
                    //接口数据请求失败 toast提示
                    console.log()
                    uni.showToast({
                        title: res.data.message,
                        icon: 'none'
                    })
                    
                }
            } else {
                //网络请求失败
                uni.showToast({
                    title: '网络不稳定,请稍后再试',
                    icon: 'none'
                })
            } 
        }
    })
}

//上传封装
const upload = ({url, filePath,formData, progress,success,fail}) => {
    let tokenId = uni.getStorageSync('tokenId')
    
    console.log('upload封装====')
    console.log(url)
    console.log(filePath)
    console.log(formData)

    let header = {
            'Content-Type': 'multipart/form-data' // 默认值
        };

    return uni.uploadFile({
        url,
        filePath,
        name:'file',
        fileType: 'image',
        formData,
        header,
        complete: (res) => {
            console.log('complete===')
            console.log(res)
            if (res.statusCode === 204) {
                // 上传成功 状态码204 
                success()
            } else {
                //网络请求失败
                uni.showToast({
                    title: '上传失败,请稍后再试',
                    icon: 'none'
                })
            } 
        }
    }).onProgressUpdate((res) => { // 监听上传进度
        progress && progress(res.progress);
    })
}


export default {
    http,
    upload
}

• 请求回调使用

//请求封装模块
import api from './request.js'

//-------------- 首页----------------------

// 例如这样  根据实际情况修改
export const reqPhoneBinding = params => {
    return new Promise((resolve, reject) => {
        api.http({
            url: '/mobile/auth/public/v1/binding',
            method: 'POST',
            header:{},
            data:params,
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}