Heim > Artikel > Web-Frontend > Detaillierte Einführung in das relevante Wissen über Anfragen und Bearbeitungsergebnisse in Uniapp
Detaillierte Einführung in das relevante Wissen über Anfragen und Bearbeitungsergebnisse in Uniapp
- PHPzOriginal
- 2023-04-27 09:06:222822Durchsuche
Mit der Entwicklung des mobilen Internets steigt die Marktnachfrage nach mobilen Anwendungen. Als Reaktion auf diese Nachfrage sind verschiedene plattformübergreifende Frameworks wie React Native und Flutter entstanden. Unter anderem ist Uniapp ein Framework, mit dem plattformübergreifende Anwendungen entwickelt werden können. Es kann schnell mehrere Plattformen wie Android, iOS, Web, WeChat-Applets und Alipay-Applets erstellen.
In Uniapp ist das Senden von Anfragen und die Verarbeitung von Anfrageergebnissen eine Kernfunktion. In diesem Artikel werden die relevanten Kenntnisse über Anfragen und Verarbeitungsergebnisse in Uniapp ausführlich vorgestellt.
1. Senden von Anfragen
Es gibt viele Möglichkeiten, Anfragen in Uniapp zu senden. Die häufigste Methode ist die Verwendung der uni.request-Methode.
uni.request({
url: 'http://www.example.com',
data: {
name: 'example'
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.data)
}
});
In diesem Code ist uni.request die Methode zum Senden einer Anfrage. Es muss ein Objekt übergeben werden, das Parameter wie URL, Daten, Header, Erfolg usw. enthält, wobei URL die Anfrageadresse und Daten die Adresse darstellt Die angeforderten Daten und der Header stellen den Anforderungsheader dar. Erfolg stellt die Rückruffunktion dar, nachdem die Anforderung erfolgreich war. Während des Anforderungsprozesses können Sie auch die Parameter „fail“ und „complete“ übergeben, die den Anforderungsfehler bzw. die Rückruffunktion nach Ende der Anforderung darstellen.
Eine andere Möglichkeit, eine Anfrage zu senden, besteht darin, die gekapselte uni.request-Methode zu verwenden und sie in eine separate JS-Datei zu kapseln.
//request.js
import { getBaseUrl } from './config';
const req = (url, method, data) => {
return new Promise((resolve, reject) => {
uni.request({
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
},
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err);
}
});
});
}
export const post = (url, data) => {
return req(url, 'POST', data);
}
export const get = (url, data) => {
return req(url, 'GET', data);
}
In diesem Code ist eine req-Methode gekapselt, die die drei Parameter URL, Methode und Daten übergibt und ein Promise-Objekt zurückgibt. Über das Promise-Objekt werden asynchrone Vorgänge implementiert, und die Ergebnisse erfolgreicher und fehlgeschlagener Anforderungen sind an die Auflösungs- und Ablehnungsmethoden übergeben. Gleichzeitig sind auch die Get- und Post-Methoden gekapselt, die das Senden von Get- und Post-Anfragen darstellen. Die Verwendung ist wie folgt:
import { get, post } from './request';
get('/user', {id: 1}).then(res => {
console.log(res.data);
});
post('/login', {username: 'example', password: 'example'}).then(res => {
console.log(res.data);
});
2 Verarbeitung der Anforderungsergebnisse
Das Anforderungsergebnis in Uniapp ist im Allgemeinen ein JSON-Objekt, wie unten gezeigt:
{
"code": 200,
"message": "success",
"data": {
"username": "example",
"age": 18
}
}
Dabei stellt Code den Statuscode dar, Nachricht stellt die Nachricht dar und Daten stellen die Anforderungsergebnisdaten dar.
Bei der Verarbeitung des Anforderungsergebnisses müssen Sie zunächst anhand des Codes feststellen, ob die Anforderung erfolgreich ist, und sie anhand verschiedener Statuscodes entsprechend behandeln. Es kann in der Erfolgsrückruffunktion der Anforderungsmethode oder in der gekapselten Methode verarbeitet werden.
import { get } from './request';
get('/user', {id: 1}).then(res => {
if(res.code === 200) {
console.log(res.data);
} else if(res.code === 401) {
console.log('用户未登录');
} else if(res.code === 404) {
console.log('用户不存在');
} else {
console.log('请求失败');
}
});
Eine andere Möglichkeit, Anfrageergebnisse zu verarbeiten, ist die Verwendung von Interceptoren. Ein Interceptor ist eine Funktion, die die Anfrage vor dem Senden der Anfrage oder nach der Antwort auf die Anfrage verarbeiten kann, z. B. das Hinzufügen von Token, das Filtern von Daten usw. Die Art und Weise, Interceptoren in Uniapp zu verwenden, besteht darin, einen Anforderungs-Interceptor und einen Antwort-Interceptor zu kapseln, um die Logik vor und nach der Anforderung zu verarbeiten.
//request.js
import { getBaseUrl } from './config';
const requestInterceptors = (config) => {
//添加token或其他逻辑
return config;
}
const responseInterceptors = (response) => {
const res = response.data;
if(res.code === 200) {
return res.data;
} else {
//根据code进行错误处理
uni.showToast({
title: res.message,
icon: 'none'
});
return Promise.reject(res);
}
}
const request = (options) => {
const { url, method = 'GET', data } = options;
const config = {
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
}
}
return new Promise((resolve, reject) => {
uni.request({
...requestInterceptors(config),
success: (response) => {
if(response.statusCode == 200) {
resolve(responseInterceptors(response));
} else {
reject(response)
}
},
fail: (error) => {
reject(error);
}
});
})
}
export default request;
//config.js
export const getBaseUrl = () => {
//返回请求地址
return 'http://www.example.com';
}
In diesem Code sind RequestInterceptors, ResponseInterceptors und Request-Methoden gekapselt, und der Request-Interceptor und der Response-Interceptor sind darin gekapselt. Die Funktion von requestInterceptors und ResponseInterceptors besteht darin, die Anfrage vor bzw. nach der Anfrage zu verarbeiten. Die Anforderungsmethode ist eine Methode zum Senden von Anforderungen. Die Verwendungsmethode ist wie folgt:
import request from './request';
request({
url: '/user',
method: 'get',
data: {id: 1}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
Der endgültige Produktcode ist der optimierte Code:
//config.js
export const getBaseUrl = () => {
//返回请求地址
return 'http://www.example.com';
}
//request.js
import { getBaseUrl } from './config';
const requestInterceptors = (config) => {
//添加token或其他逻辑
return config;
}
const responseInterceptors = (response) => {
const res = response.data;
if(res.code === 200) {
return res.data;
} else {
//根据code进行错误处理
uni.showToast({
title: res.message,
icon: 'none'
});
return Promise.reject(res);
}
}
const request = (options) => {
const { url, method = 'GET', data } = options;
const config = {
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
}
}
return new Promise((resolve, reject) => {
uni.request({
...requestInterceptors(config),
success: (response) => {
if(response.statusCode == 200) {
resolve(responseInterceptors(response));
} else {
reject(response)
}
},
fail: (error) => {
reject(error);
}
});
})
}
export default request;
//api.js
import request from './request';
export const getUser = (id) => {
return request({
url: '/user',
method: 'get',
data: {id}
});
}
//页面中使用
import { getUser } from './api';
getUser(1).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
Dieser Artikel stellt das relevante Wissen über Anfragen und Verarbeitungsergebnisse in Uniapp vor, einschließlich des Sendens von Anfragen und Verarbeitung von Anfrageergebnissen auf verschiedene Arten sowie Verwendung von Interceptoren für die Vor- und Nachbearbeitung von Anfragen. Für Entwickler, die Uniapp für die plattformübergreifende Anwendungsentwicklung verwenden, wird die Beherrschung dieses Wissens dazu beitragen, die Entwicklungseffizienz und Codequalität zu verbessern sowie die Anwendungsstabilität und Benutzererfahrung zu verbessern.
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das relevante Wissen über Anfragen und Bearbeitungsergebnisse in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!