WeChat 애플릿은 기본 요청을 어떻게 캡슐화하나요? 인터페이스를 호출하는 방법은 무엇입니까? 다음 기사에서는 기본 WeChat 애플릿에서 요청을 캡슐화하고 인터페이스를 우아하게 호출하는 방법을 소개합니다. 도움이 되기를 바랍니다.
미니 프로그램 기본 요청 기반프라미스 스타일 요청 캡슐화
다단계 콜백 방지(콜백 지옥)
네트워크 요청 오류 처리 및 배포 통합
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── env.js // 环境配置 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
// env.js module.exports = { ENV: 'production', // ENV: 'test' }
// statusCode.js // 配置一些常见的请求状态码 module.exports = { SUCCESS: 200, EXPIRE: 403 }
// config.js const { ENV } = require('./env') let BASEURL switch (ENV) { case 'production': BASEURL = '' break case 'test': BASEURL = '' break default: BASEURL = '' break } module.exports = { BASEURL,// 项目接口地址,支持多域名 }
note 64~68행은 로그인을 호출할 때 토큰이 app.globalData에 있는지 확인합니다. 토큰이 만료되고 토큰이 지워지면 로그인 요청이 시작되지 않습니다. 다음 요청에서 다시 시작됩니다. 그러면 새 토큰이 다시 획득됩니다
// 引入状态码statusCode const statusCode = require('./statusCode') // 定义请求路径, BASEURL: 普通请求API; CBASEURL: 中台API,不使用中台可不引入CBASEURL const { BASEURL } = require('./config') // 定义默认参数 const defaultOptions = { data: {}, ignoreToken: false, form: false, } /** * 发送请求 * @params * method: <String> 请求方式: POST/GET * url: <String> 请求路径 * data: <Object> 请求参数 * ignoreToken: <Boolean> 是否忽略token验证 * form: <Boolean> 是否使用formData请求 */ function request (options) { let _options = Object.assign(defaultOptions, options) let { method, url, data, ignoreToken, form } = _options const app = getApp() // 设置请求头 let header = {} if (form) { header = { 'content-type': 'application/x-www-form-urlencoded' } } else { header = { 'content-type': 'application/json' //自定义请求头信息 } } if (!ignoreToken) { // 从全局变量中获取token let token = app.globalData.token header.Authorization = `Bearer ${token}` } return new Promise((resolve, reject) => { wx.request({ url: BASEURL + url, data, header, method, success: (res) => { let { statusCode: code } = res if (code === statusCode.SUCCESS) { if (res.data.code !== 0) { // 统一处理请求错误 showToast(res.data.errorMsg) reject(res.data) return } resolve(res.data) } else if (code === statusCode.EXPIRE) { app.globalData.token = '' showToast(`登录过期, 请重新刷新页面`) reject(res.data) } else { showToast(`请求错误${url}, CODE: ${code}`) reject(res.data) } }, fail: (err) => { console.log('%c err', 'color: red;font-weight: bold', err) showToast(err.errMsg) reject(err) } }) }) } // 封装toast函数 function showToast (title, icon='none', duration=2500, mask=false) { wx.showToast({ title: title || '', icon, duration, mask }); } function get (options) { return request({ method: 'GET', ...options }) } function post (options) { // url, data = {}, ignoreToken, form return request({ method: 'POST', ...options }) } module.exports = { request, get, post }
새 API 파일을 만들고(여기에서는 주문 인터페이스를 예로 사용) 새 파일을 만듭니다. api/index.js
(동일한 파일에 쓸 때 인터페이스가 너무 장황해지지 않도록 통합 인터페이스 배포 처리)api/index.js
(接口分发统一处理,防止接口写到同一个文件下过于冗长)
目录结构如下:
. ├── api │ ├── config.js // 相关请求的配置项,请求api等 │ ├── index.js // 统一处理入口 │ ├── order.js // 订单接口 │ ├── request.js // 封装主函数 │ ├── statusCode.js // 状态码 └── ...
// order.js const request = require('./request') module.exports = { // data可以传入 url, data, ignoreToken, form, cToken apiName (data) { let url = 'apiUrl' return request.post({ url, data }) } }
const orderApi = require("./order") module.exports = { orderApi }
const { orderApi } = require('dir/path/api/index') ... 1. `Promise.then()`链式调用 func () { orderApi.apiName(params).then(res => { // do Something }).catch(err => { // do Something }) } 2. `async/await` 调用 async func () { try { let res = await orderApi.apiName(params) // do Something } catch (err) { // do Something } }
参数 | 说明 | 数据类型 | 默认值 |
---|---|---|---|
url | 接口名 | String |
'' |
data | 请求体 | Object |
{} |
ignoreToken | 请求是否携带token | Boolean |
false |
form | 是否是表单请求 | Boolean |
false 디렉토리 구조는 다음과 같습니다. | rrreee
매개변수 | 설명 | 데이터 유형 | 기본값 |
---|---|---|---|
url | 인터페이스 이름 |
문자열 🎜 |
' ' 🎜🎜 |
data🎜 | 요청 본문🎜객체 🎜 |
{} 🎜🎜 |
|
ignoreToken🎜 | 요청에 토큰이 전달되는지 여부🎜 | 부울 code>🎜<td>
<code>false 🎜🎜 |
|
form🎜 | 양식 요청인지🎜 |
Boolean 🎜 |
false 🎜🎜🎜🎜🎜【관련 학습 권장 사항: 🎜Mini 프로그램 개발 튜토리얼🎜】🎜 |
위 내용은 네이티브 미니 프로그램은 어떻게 요청을 캡슐화하고 인터페이스를 우아하게 호출할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!