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

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

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

// 注释将会特别详细,只有您有合理地耐心看完将不会出现问题
function request(url, data) {
    
    
	return new Promise((resolve) => {
    
    
		wx.request({
    
    
			method: 'POST',
			url: url,
			data: data,
			header: {
    
    
				'Accept': "*/*",
				'content-type': 'application/x-www-form-urlencoded',
				'token': "",//您可根据如本地存储或者vuex再此处使用逻辑或 来插入token
			},
			success(res) {
    
    
				// 这里根据和后台协商判断接口是否走通  如 code为1时视为成功
				// 如不需要可删除一下内容直接使用   resolve(res) 即可
				if (res.data.code == 1) {
    
    
					resolve(res)
				} else {
    
    
					wx.showToast({
    
    
						title: res.data.msg, //抛出错误提示
						icon: 'none',
						duration: 1500,
					})
				}
			},
			fail(err) {
    
    
				wx.showToast({
    
    
					title: '请求失败',
					icon: 'none',
					duration: 1500,
				})
			}
		})
	})
}
function Get(url,data) {
    
    
  return request(url, data)
}
module.exports = {
    
    
  Get
}

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

import {
    
    Get} from "Get.js"

let base = '接口前缀';
//您在此单独抛出了名为 GetList 的函数
export const GetList = params => {
    
     return Get(`${
      
      base}/getlist`,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的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。

猜你喜欢

转载自blog.csdn.net/weixin_47821281/article/details/108083063
今日推荐