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

桃扇骨 2023-06-30 10:53 31阅读 0赞

### 普通封装 ###

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)		
        })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery封装成promise请求

promise进行封装 const jqPromiseAjax = (params) => { return new Promise((resolve...

淡淡的烟草味﹌/ 2024年04月18日 10:40/ 0 赞/ 85 阅读

相关 uniapp接口请求api封装，规范化调用

封装规范和vue中的差不多，都是统一封装成一个request对象，然后在api.js里面调用。先创建一个utils文件夹，然后里面创建一个request.js，代码如下：

忘是亡心i/ 2024年02月20日 08:47/ 0 赞/ 77 阅读

相关 uni-app 封装请求接口，promise封装请求

普通封装 1. 在根目录下创建Utils.js 文件（内容如下） let apiReq={ req(obj){ var method =

桃扇骨/ 2023年06月30日 10:53/ 0 赞/ 32 阅读

相关 promise封装XMLHttpRequest请求，封装ajax

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

清疚/ 2023年01月16日 14:21/ 0 赞/ 189 阅读

相关 promise使用promise进行封装http请求接口

封装 // 网络请求 http(options) { const app = getApp(); let urlTe

古城微笑少年丶/ 2022年12月13日 01:57/ 0 赞/ 315 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打

忘是亡心i/ 2022年10月12日 15:00/ 0 赞/ 308 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打开

今天药忘吃喽~/ 2022年10月11日 00:45/ 0 赞/ 291 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1605 阅读

相关 uniapp 公共方法封装公共请求封装

一般我都习惯把公共js封装到util这个文件夹下常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里目录： ![20201117155628

男娘i/ 2021年07月24日 20:05/ 0 赞/ 1561 阅读

相关 uniapp接口请求封装api(超简单)

最下面有使用方法 const commoneUrl = "http://192.168..."; //公共路径 const userId =

ゝ一世哀愁。/ 2021年07月24日 14:56/ 0 赞/ 4091 阅读