uni-app 封装请求接口,promise封装请求

29 篇文章 2 订阅
13 篇文章 1 订阅

普通封装

1. 在根目录下创建Utils.js 文件(内容如下)

let apiReq={
	req(obj){
		var method = obj.method || "GET"; // 请求方式,默认为GET
		var url = obj.url || ""; // 请求路径 
		var data = obj.data || {}; // 请求数据
		var header = obj.header || {}; // 请求头
		var success = obj.success; // 成功回调函数
		var fail = obj.fail; //表示失败后,要执行的回调函数
		uni.request({
			url: url,
			data: data,
			method: method,
			header: header,
			success: ((res) => {
			  if(res.statusCode === 403 || res.statusCode === 401) {
				// 错误处理
			  } else if (res.statusCode === 200) {
				success(res)
			  } 
			}),
			fail:((err)=>{
				fail(err)
			})
		})
	}
}
export default apiReq

2. main.js 中引入和挂载

import apiReq from './Utils.js'
Vue.prototype.$apiReq = apiReq

3.组件中使用

let obj={ // 创建对象
	url: 'www.baidu.com', // 示例请求路径
    method:"PUT",
	success: (res) => {
	   this.data = res.data //请求成功操作
	},
 }
this.$apiReq.req(obj) // 调用封装好的api

基于promise封装

1. 创建工具类:utils目录下request.js

function req(obj) {
  return new Promise((resolve, reject) => {
	const HOST = 'https://test.net/'
	var method = obj.method || "GET"; 
	var url = HOST + obj.url || ""; 
	var data = obj.data || {}; 
	var header = obj.header || {
	    'Content-Type': obj.contentType || 'application/json',
	}; 
	var success = obj.success; // 成功回调函数
	var fail = obj.fail; //表示失败后,要执行的回调函数
	uni.request({
		url: url,
		data: data,
        method: method,
		header: header,
		success: ((res) => {
		  if (res.statusCode === 403 || res.statusCode === 401) {
		   // 错误处理,返回登录页
            uni.reLaunch({url:'/pages/login/index'})
		  } else if (res.statusCode === 200) {
		     resolve(res)
		  }
		}),
		fail: ((err) => {
		  reject(err)
		})
	})
  })
}
export default req

2. 创建api目录,目录下创建user.js

// 引入工具类
import request from '@/utils/request.js' 

export function login(data){ // 模拟登录
	return request({
	    url: 'test/login',
		method: 'post',
		contentType:'application/x-www-form-urlencoded',
		data: data
	 })
}

3. 组件中使用

// 组件的script首行按需引入api
import { login } from '@/api/user.js' 

// methods
submit(){
    let data = {
	  phone: '123456'
    }
    login(data).then(res => { // 请求
	  console.log(res)		
    })
}

 

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值