普通封装
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)
})
}