uni-app网络请求封装（和vue网络请求的方法类似）

系统管理员 2022-12-27 11:28 136阅读 0赞

*  我这里分为三个文件js方便管理
 *  env.js（管理请求的网络地址）
 *  request.js（接口调用的文件）
 *  servixe.js（接口的请求代码）

**env.js**

/** * baseUrl : api调用服务器域名 */
    let baseUrl = "https:你请求的网络地址";
    // 下面这个判断是判断环境切换请求的网络地址，不需要的可以删除
    if (process.env.NODE_ENV === "development") { 
      baseUrl = "http://localhost:3033/api";	
    }

**request.js**

//这里我只是布置了需要用到的，如果要添加别的方法，请随意
    import {  baseUrl } from '@/pages/api/env'
    export const request = (prams) => { 
    	return new Promise((resolve, reject) => { 
    		let url = baseUrl + prams.url;
    		return uni.request({ 
    			url: url,
    			data: prams.query,
    			dataType: 'json',
    			success: (res) => { 
    				resolve(res.data);
    			},
    			fail: (err) => { 
    				reject(err);
    			},
    			complete: () => { 
    				console.log('请求完成')
    			}
    		});
    	})
    }

**servixe.js**

import {  request } from '@/pages/api/request'
    
    /** * 文章列表(全部) */
    export const article = () => {  return request({  url:'/queryAll', method:'get'})}
    
    /** * 文章列表(id查询) */
    export const articleId = (query) => {  return request({  url:'/query', method:'get',query:query})}

**在页面上调用：**

//这里演示的是带参数的请求
    import {  queryAll, articleId } from "@/pages/api/servixe"
    onLoad() { 
    	let id = '我是参数';
    	articleId({ 
    		id: id
    	}).then((res) => { 
    		console.log(res);	//这里就是请求到的结果了
    	})
    },
    
    //不带参数的请求（直接不填写即可）
    article().then((res) => { 
    		console.log(res);	//这里就是请求到的结果了
    	})
    })