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

1. 在根目录下创建Utils.js 文件（内容如下）let apiReq={req(obj){var method = obj.method || "GET"; // 请求方式,默认为GETvar url = obj.url || ""; // 请求路径var data = obj.data || {}; // 请求数据var header = obj.hea...

前端小王子

10871人浏览 · 2020-01-17 11:28:07

前端小王子 · 2020-01-17 11:28:07 发布

普通封装

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