В эти дни команда приступила к разработке небольших программ.Такого раньше никогда не было.Это первый раз.Всем понятно ощущение первого раза. На выходных я просматривал код проекта апплета и обнаружил небольшие проблемы в сетевом запросе, в конце концов, я не мог не придумать способ инкапсулировать запрос. Посмотрите ниже.
При просмотре кода проекта я обнаружил следующие проблемы:
- Сетевые запросы записываются в Page, и каждый запрос должен многократно записывать wx.request и некоторые базовые конфигурации;
- Каждая страница должна обрабатывать один и тот же тип исключения;
- Когда код состояния http, возвращаемый серверной частью, отличается от 200, он не может напрямую войти в функцию, соответствующую отказу обработки;
В ответ на эти проблемы сначала создайте новый каталог apis в каталоге проекта и поместите в этот каталог все, что связано с запросами API, как показано на следующем рисунке.
- Создайте HTTP-заголовок запроса по умолчанию в конструкторе.Вы можете настроить некоторый контент в заголовке.Если параметр заголовка не установлен в соответствующем методе запроса, используется параметр заголовка по умолчанию;
- Запрос инкапсулируется такими методами, как get post delete put.При инициировании сетевого запроса нет необходимости повторно писать коды wx.request({method:xxx}), если такие методы, как getRequest и postRequest называются;
- В успехе функции обработки возврата результата запроса определите код состояния, возвращенный сервером.Для кода состояния 200 он обрабатывается успешно в соответствии с бизнес-процессом, а для кода состояния, отличного от 200, он обрабатывается в соответствии с исключением .
- Унифицированный интерфейс обработки функций обработки исключений зарезервирован, и унифицированная обработка исключений может быть установлена с помощью setErrorHandler, так что некоторые исключения, которые могут быть обработаны единообразно, не нужно повторно обрабатывать на бизнес-странице. Например, код, который возвращает 401 из серверная часть может быть передана единообразно. Перейдите на страницу входа, чтобы пользователь мог войти в систему;
- Этот запрос не ограничивается поставщиками услуг, это может быть бизнес-сервер, разработанный самостоятельно, или он может использоваться для вызова сторонних сервисов;
/**
* name: api.js
* description: request处理基础类
* author: 徐磊
* date: 2018-5-19
*/
class request {
constructor() {
this._header = {}
}
/**
* 设置统一的异常处理
*/
setErrorHandler(handler) {
this._errorHandler = handler;
}
/**
* GET类型的网络请求
*/
getRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'GET')
}
/**
* DELETE类型的网络请求
*/
deleteRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'DELETE')
}
/**
* PUT类型的网络请求
*/
putRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'PUT')
}
/**
* POST类型的网络请求
*/
postRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'POST')
}
/**
* 网络请求
*/
requestAll(url, data, header, method) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
header: header,
method: method,
success: (res => {
if (res.statusCode === 200) {
//200: 服务端业务处理正常结束
resolve(res)
} else {
//其它错误，提示用户错误信息
if (this._errorHandler != null) {
//如果有统一的异常处理，就先调用统一异常处理函数对异常进行处理
this._errorHandler(res)
}
reject(res)
}
}),
fail: (res => {
if (this._errorHandler != null) {
this._errorHandler(res)
}
reject(res)
})
})
})
}
}
export default request
2. Создайте новый класс agriknowВ agriknow выполняются следующие действия:
- Реализовать все вызовы бизнес-служб, такие как запрос всех списков новостей [getNews], запрос всех списков курсов [getCourseList];
- Реализовать унифицированную обработку исключений и передать ее в запрос;
- Преобразовать ответ результата, возвращенный сервером, в response.data и вернуть его в место, где вызывается API;
/**
* name: agriknow.js
* description: 农知汇服务器提供的服务
* author: 徐磊
* date: 2018-5-19
*/
import request from './request.js'
class agriknow {
constructor() {
this._baseUrl = 'https://apis.xxx.xxx.com/dev/apis/train/v1/'
this._defaultHeader = { 'data-tupe': 'application/json' }
this._request = new request
this._request.setErrorHandler(this.errorHander)
}
/**
* 统一的异常处理方法
*/
errorHander(res) {
console.error(res)
}
/**
* 查询所有新闻列表
*/
getNews(page = 1, size = 10) {
let data = { page: page, size: size }
return this._request.getRequest(this._baseUrl + 'news/client', data).then(res => res.data)
}
/**
* 获取所有课程
*/
getCourseList(page = 1, size = 10, key = null) {
let data = key != null ? { page: page, size: size, queryValue: key } : { page: page, size: size }
return this._request.getRequest(this._baseUrl + '/course/mobile', data).then(res => res.data)
}
}
export default agriknow
3. Вызов функции
- Цитата argriknow в приложении
import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… …… - Определите свойство типа agriknow и создайте его экземпляр
import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… …… }, agriknow:new agriknow() }) - Вызывается на странице
const app = getApp(); Page({ data: { courseData: [], page: 1, size: 10, total: 0 }, onLoad: function () { …… …… wx.startPullDownRefresh() this.getdataList(); }, //查询课程列表 getdataList() { app.agriknow.getCourseList(this.data.page++, this.data.size, '') .then(res => { wx.stopPullDownRefresh() let list = this.data.page > 2 ? this.data.courseData.concat(res.list) : res.list this.setData({ courseData: list }) }) .catch(res => { wx.stopPullDownRefresh() wx.showToast({ title: '出错了！', icon: 'none' }) }) }, //下拉刷新 onPullDownRefresh() { console.log("下拉刷新"); this.getdataList(); }, …… …… })
Наверное, все так, вот что это значит, надеюсь, это может быть полезно для всех.