So legen Sie den öffentlichen Header in der Uniapp-Anfrage fest (zwei Methoden)

Während des Entwicklungsprozesses verwenden wir häufig UniApp, um plattformübergreifende Anwendungen zu erstellen. UniApp ist ein Open-Source-Framework, das auf Vue.js basiert. Es kann den Vue.js-Kern und einige plattformübergreifende Funktionen bündeln und so ein umfassendes Entwicklungserlebnis bieten. Während des Entwicklungsprozesses müssen wir häufig Netzwerkanfragen senden, um Daten abzurufen. Zu diesem Zeitpunkt müssen wir einige öffentliche Header-Parameter festlegen, um die Genauigkeit und Wirksamkeit der Anfrage sicherzustellen.

In UniApp können wir die gekapselte uni.request verwenden, um Netzwerkanfragen zu senden. uni.request bietet eine gute plattformübergreifende Leistung. Es kapselt die native XMLHttpRequest- und die native Axios-Erweiterung in UniApp und kann zum Initiieren von HTTP/HTTPS-Anfragen verwendet werden. Zum Festlegen öffentlicher Header-Parameter gibt es die folgenden zwei gängigen Methoden.

Methode 1: Legen Sie

// main.js
Vue.prototype.$http = function (url, data, method) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  return uni.request({
    url,
    data,
    method,
    header
  })
}

// 调用
this.$http('/api/user', { id: 123, name: 'Tom' }, 'GET').then(res => {
  console.log(res)
})

in den Optionen der Anfrage fest. Darunter ist die $ttp-Methode in main.js definiert, die öffentlichen Header-Parameter werden in Optionen festgelegt und die spezifischen Parameter können beim Aufruf übergeben werden.

Methode 2: Einheitliche Einstellung durch Interceptor

// request.js
export function request(opts) {
  let token = uni.getStorageSync('token');
  let header = {
    'Authorization': token,
    'Content-type': 'application/json'
  };
  const interceptor = {
    request: (opts) => {
      opts.header = header;
      return opts;
    },
    response: (res) => {
      const { statusCode, data } = res;
      if (statusCode === 200) {
        return data;
      } else {
        uni.showToast({
          title: '请求失败',
          icon: 'none'
        })
        return Promise.reject(res);
      }
    }
  }
  uni.addInterceptor(interceptor);
  return uni.request(opts).finally(() => {
    uni.removeInterceptor(interceptor);
  })
}

// 调用
request({
  url: '/api/user?id=123&name=Tom',
  method: 'GET'
}).then(res => {
  console.log(res);
})

In dieser Methode definieren wir eine Anforderungsfunktion, fangen die Anforderung über den Interceptor ab, legen die öffentlichen Header-Parameter in der Funktion fest und initiieren dann die Anforderung über uni.request. Beim Aufruf einer Anfrage müssen Sie nur bestimmte Parameter übergeben.

Zusammenfassend können wir sehen, dass es nicht schwierig ist, öffentliche Header-Parameter in UniApp festzulegen. Sie müssen sie nur in den Optionen von uni.request festlegen, oder Sie können sie auch einheitlich über Interceptoren festlegen, was dies verbessern kann Code ist eine gute Wahl, um die Wiederverwendbarkeit zu verbessern und das Schreiben wiederholten Codes zu reduzieren.

Das obige ist der detaillierte Inhalt vonSo legen Sie den öffentlichen Header in der Uniapp-Anfrage fest (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!