Wie Uniapp die Kapselung von Netzwerkanforderungen implementiert-uni-app-php.cn

Wie Uniapp die Kapselung von Netzwerkanforderungen implementiert

coldplay.xixi

Freigeben： 2020-12-21 17:25:19

Original

9769 Leute haben es durchsucht

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

Nach dem Login kopieren

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: {
       &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;,
       &#39;accessToken&#39;: `${token}` //权限token 
   },
   success: (res) => {
      rejected(res.data);
   }.fail = (err) => {
   rejected(err)
 }
});
}
}
export default service;

Nach dem Login kopieren

3 , Abschließend optimieren wir erneut auf der Grundlage des vorherigen Schritts

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

Nach dem Login kopieren

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 &#39;/common/request.js&#39;
export function login(data) {
  return request({
    url: &#39;/user/login&#39;,
    method: &#39;POST&#39;,
    data
  })
}
Nach dem Login kopieren
import { login} from &#39;./api.js&#39;;  //引入需要的api
//发起请求
onLoad() {
login(&#39;parameter&#39;).then(data => {
   console.log(data);
});
}...
Nach dem Login kopieren
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!