小程序网络请求的封装
在开发中，请求接口是必须的，如果每次都去请求都写完整的调用，这样显得冗余，也不好维护，所有都是需要进行封装处理的，这里总结出觉得几种还不错的。
一、封装成promise对象的，这样可以像我们之前在vue中操作axios请求一样
第一种：
在
reques文件夹新建api.js（用来统一管理api）和request.js（封装网络请求）
// request/request.js
const BASE_URL = "http://xxxxxx:8001";
// 使用promise封装 一个对象做参数并设置默认值
export default function request({
url = "",
method = "GET",
data = {},
dataType = "json",
}) {
// 返回promise实例 在使用时就可以使用async await
return new Promise((resolve, reject) => {
wx.request({
url: BASE_URL + url,
data,
dataType,
method,
timeout: 50000,
header: {
"xx-token": wx.getStorageSync("token"),
},
success: (res) => {
// 根据接口说明 定义业务失败的处理
if (res.statusCode !== 200 || res.data.errno !== 0) {
wx.showToast({
title: res.data.errMsg || "请求数据出错",
});
// 在请求处 通过判断返回的这个false 是业务逻辑不往下跑
resolve(false);
return;
}
resolve(res.data);
},
fail: (err) => {
reject(err);
},
});
});
}
// request/api.js
import request from "./request.js";
// 只用了一个形参data 也就是可能传的参数
// 首页
const IndexAPI = (data) =>
request({
url: "/api/index",
method: "GET",
data,
});
// 登录
const LoginAPI = (data) =>
request({
url: "/api/login",
method: "POST",
data,
});
export { IndexAPI, LoginAPI };
在需要请求处的js文件
// /page/login/login.js
import { LoginAPI } from "../../api/api.js";
Page({
data: {
username: "aaa",
password: "123",
},
// 点击登录
async handleLogin(e) {
// 我这里验证的业务逻辑不处理了
// 直接发请求
let res = await LoginAPI({
username: this.data.username,
pwd: this.data.password,
});
// 业务逻辑失败 不往下执行
if(!res) return
const { token, userInfo } = res.data;
// 存token
wx.setStorageSync("xx-Token", token);
wx.setStorageSync("userInfo", userInfo);
this.setData({
username: "",
password: "",
});
wx.showToast({
title: "登录成功",
});
},
}
第二种跟上面那种差不多
// request/request.js
const BASE_URL = "http://xxxxxx:8001"
export default function request(api, params={}){
return new Promise((resolve,reject)=>{
wx.request({
url: BASE_URL + api,
data: params.data || {},
header: params.header || {},
method: params.method || "GET",
dataType: "json",
success(res){
resolve(res.data);
},
fail(err){
reject(err)
}
})
})
}
// request/api.js
import request from "./request.js";
// 登录
export const LoginAPI = (params) => request("/api/login", params)
// /page/login/login.js
import { LoginAPI } from "../../api/api.js";
Page({
data: {
username: "aaa",
password: "123",
},
// 点击登录
async handleLogin(e) {
// 我这里验证的业务逻辑不处理了
// 直接发请求
let res = await LoginApi({
data: {
username: this.data.username,
pwd: this.data.password
},
method: "POST"
})
// 业务逻辑失败或请求失败 不往下执行
if(!res && res.errno ===0) return
const { token, userInfo } = res.data;
// 存token
wx.setStorageSync("xx-Token", token);
wx.setStorageSync("userInfo", userInfo);
this.setData({
username: "",
password: "",
});
wx.showToast({
title: "登录成功",
});
},
}
二、不使用返回promise对象
这样的好处是： 暴露出个成功处理的方法和失败的方法 在调用那边感觉看起来清晰（可能也不清晰看个人）
// request/request.js
import { BASE_URL } from "./api.js";
// 这样的好处是让成 暴露出个成功处理的方法和失败的方法 感觉看起来顺
function request({
url = "", // 每个接口单独的请求
method = "GET",
data = null,
dataType = "json",
successCb = null,
failCb = null,
} = {}) {
wx.request({
url: BASE_URL + url,
method,
timeout: 30000,
data,
dataType,
success: (res) => {
if (res.statusCode !== 200 || res.data.errno !== 0) {
failCb();
return;
}
successCb && successCb(res.data);
},
fail(err) {
failCb();
},
});
}
export default request;
// request/api.js
const BASE_URL = "http://xxxxxxx:8001";
const LoginAPI = "/api/Login"; // 注册登录
export { LoginAPI };
// /page/login/login.js
import request from "../../api/request.js";
import { LoginAPI } from "../../api/api.js";
Page({
data: {
username: "aaa",
password: "123",
},
// 点击登录
handleLogin(e) {
// 我这里验证的业务逻辑不处理了
request({
url: LoginAPI,
method: "POST",
data: {
username: this.data.username,
pwd: this.data.password,
},
successCb: (res) => {
const { token, userInfo } = res.data;
wx.setStorageSync("token", token);
wx.setStorageSync("userInfo", userInfo);
this.setData({
username: "",
password: "",
});
},
failCb: () => {
// 失败的逻辑 可有可无
},
});
}
封装大同小异，不一定都一样，根据每个业务的不一样可以灵活去变动某一些地方。 如有错误的地方，还望指出~~
