uniapp封装网络请求(post+token)

一时失言乱红尘 2022-11-29 00:51 542阅读 0赞

## 先看代码，复制使用即可，一共三个步骤，具体使用方式下文将清楚罗列，任何新手都可以轻松了解和使用。同时您将为此省下很多宝贵时间。 ##

下面是请求的封装,您需要在根目录下新建`Get.js`文件，然后复制以下代码即可。

// 注释将会特别详细，只有您有合理地耐心看完将不会出现问题
    function request(method,url, data) { 
    	return new Promise((resolve) => { 
    		uni.showLoading({ 
    			title:'加载中...'
    		});
    		uni.request({ 
    			method: method,
    			url: url,
    			data: data,
    			header: { 
    				'Accept': "*/*",
    				'content-type': 'application/json;charset=utf-8',
    				'token': "",//您可根据如本地存储或者vuex再此处使用逻辑或 来插入token
    				'Authorization':'',//有的时候这里不一定是 token 还可能是 Authorization
    			},
    			success(res) { 
    				resolve(res)
    				uni.hideLoading()
    			},
    			fail(err) { 
    				uni.showToast({ 
    					title: '请求失败',
    					icon: 'none',
    					duration: 1500,
    				})
    				uni.hideLoading()
    			}
    		})
    	})
    }
    function POST(method,url,data) { 
      return request(method,url,data)
    }
    module.exports = { 
      POST
    }

## 接下来是配置调用的方法，我推荐您新建一个API.JS文件，在根目录或者您习惯的地方，然后复制以下代码即可 ##

import {  POST } from "POST"
    let base = 'https://www.zhijiaotai.com/education';
    //微信登录
    export const WXlogin = params => {  return POST('POST',`${ base}/WeChat/login`,params).then(res => res.data); }; 
    //通过openid获取用户的信息
    export const OpenidGetUser = (openId,params) => {  return POST('GET',`${ base}/User/openid/${ openId}`,params).then(res => res.data); };

## 这是最后一步，在任何您想调用`GetList`这个接口下数据的页面下复制以下代码 ##

import {  GetList } from "../../Api"  //您的api路径
    //然后在您的函数中 或者 onload 测试一下
    //请注意 GetList 是个方法，您想传输的参数可以这样设置 不需要参数时不传即可
    onload(){ 
    	let params = { 
    	name：'姓名' 
    	}
    	GetUserMsg(params).then(res=>{ 
    		console.log(res) //然后就可以看见您所需要的数据
    	})
    }

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。