Heim  >  Artikel  >  Web-Frontend  >  Wie Uniapp die Kapselung von Netzwerkanforderungen implementiert

Wie Uniapp die Kapselung von Netzwerkanforderungen implementiert

coldplay.xixi
coldplay.xixiOriginal
2020-12-21 17:25:199740Durchsuche

Uniapp implementiert die Kapselungsmethode für Netzwerkanforderungen: Implementieren Sie zuerst die ursprüngliche Anforderung und erstellen Sie dann eine neue [request.js]-Datei. Der Code lautet [return new Promise((resolved, abgelehnt) => {uni.request..]; Endlich optimieren.

Wie Uniapp die Kapselung von Netzwerkanforderungen implementiert

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version.

Empfohlen (kostenlos): Uni-App Entwicklungs-Tutorial

Uniapp implementiert die Methode zur Kapselung von Netzwerkanforderungen:

1. Die anfängliche Anforderungsverwendung von Uniapp ist wie folgt:

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. Wir führen zunächst eine einfache Kapselung durch Promise durch und erstellen eine neue Anforderung .js-Datei:

//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 , Abschließend optimieren wir erneut auf der Grundlage des vorherigen Schritts

//把配置项单独处理
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. Das Verzeichnis der neuen Seiten ist wie folgt

┌─common

│ ├─ request.js //Request

┌─pages

│ ├─index

│ │ └─api.js //api list

│ │ └─index.vue //Seitendatei

├─static

├─store

│ ├─index.js //vuex

├─main.js

├─App.vue

├─manifest.json

└─ page.json

2. Konfigurieren Sie api.js //api list

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

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

Das obige ist der detaillierte Inhalt vonWie Uniapp die Kapselung von Netzwerkanforderungen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn