Comment Uniapp implémente l'encapsulation des requêtes réseau

Uniapp implémente la méthode d'encapsulation des requêtes réseau : implémentez d'abord la requête initiale ; puis créez un nouveau fichier [request.js], le code est [return new Promise((resolved, rejeté) => {uni.request ..] ;Enfin il suffit d'optimiser.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version uni-app2.5.1, cette méthode convient à tous. marques d'ordinateurs.>

Tutoriel de développement d'uni-app

Méthode d'implémentation d'Uniapp pour l'encapsulation des requêtes réseau :

1. La requête initiale pour uniapp est utilisée comme suit :

uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); }.fail = (err) => { console.log(err); } });

2 Nous effectuons d'abord une simple encapsulation via Promise et créons une nouvelle requête. js :

//options参数我们后面会说 function service(options = {}) { return new Promise((resolved, rejected) => { uni.request({ url: options.url, //仅为示例，并非真实接口地址。 data: options.data, header: { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //权限token }, success: (res) => { rejected(res.data); }.fail = (err) => { rejected(err) } }); } } export default service;

3 Enfin, nous optimisons à nouveau en fonction de l'étape précédente

//把配置项单独处理 import store from '/store/index.js'; //vuex let server_url=' ';//请求地址 let token = ' '; 凭证 process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api' ; //环境配置 function service(options = {}) { store.state.token && (token = store.state.token); //从vuex中获取登录凭证 options.url = `${server_url}${options.url}`; //配置请求头 options.header = { 'content-type': 'application/x-www-form-urlencoded', 'accessToken': `${token}` //Bearer }; return new Promise((resolved, rejected) => { //成功 options.success = (res) => { if (Number(res.data.code) == 0) { //请求成功 resolved(res.data.data); } else { uni.showToast({ icon: 'none', duration: 3000, title: `${res.data.msg}` }); rejected(res.data.msg);//错误 } } //错误 options.fail = (err) => { rejected(err); //错误 } uni.request(options); }); } export default service;

4.<. >1. Créez une nouvelle page de pages. Le répertoire est le suivant :

┌─common

│ ├─request.js //Request<. >

│ ├─index

│ │ └─api.js //liste d'API

│ │ └─index.vue //Page fichier

├─static

├─store

│ ├─index.js //vuex

├─main.js

├─App.vue

├─manifest.json

└─pages.json

2. Configurez la liste des API.

import request from '/common/request.js' export function login(data) { return request({ url: '/user/login', method: 'POST', data }) }

Copier après la connexion

3. Utilisez

import { login} from './api.js'; //引入需要的api //发起请求 onLoad() { login('parameter').then(data => { console.log(data); }); }...

Copier après la connexion

sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!