Comment définir l'en-tête public dans la requête Uniapp (deux méthodes)

Pendant le processus de développement, nous utilisons souvent UniApp pour créer des applications multiplateformes. UniApp est un framework open source basé sur Vue.js. Il peut regrouper le noyau de Vue.js et certaines fonctionnalités multiplateformes, offrant une expérience de développement complète. Pendant le processus de développement, nous devons souvent envoyer des requêtes réseau pour obtenir des données. À ce stade, nous devons définir certains paramètres d'en-tête publics pour garantir l'exactitude et l'efficacité de la requête.

Dans UniApp, nous pouvons utiliser le uni.request encapsulé pour envoyer des requêtes réseau. uni.request a de bonnes performances multiplateformes. Il encapsule le XMLHttpRequest natif et l'extension axios native dans UniApp et peut être utilisé pour lancer des requêtes HTTP/HTTPS. Pour définir les paramètres d’en-tête public, il existe les deux méthodes courantes suivantes.

Méthode 1 : définissez

// 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)
})

dans les options de la requête. Parmi elles, la méthode $ttp est définie dans main.js, les paramètres d'en-tête public sont définis dans les options et les paramètres spécifiques peuvent être transmis lors de l'appel.

Méthode 2 : paramètre unifié via l'intercepteur

// 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);
})

Dans cette méthode, nous définissons une fonction de requête, interceptons la requête via l'intercepteur et définissons les paramètres d'en-tête public dans la fonction, puis lançons la requête via uni.request. Lors de l’appel d’une requête, il vous suffit de transmettre des paramètres spécifiques.

Pour résumer, nous pouvons voir qu'il n'est pas difficile de définir les paramètres d'en-tête public dans UniApp. Il vous suffit de les définir dans les options d'uni.request, ou vous pouvez également les définir de manière uniforme via des intercepteurs, ce qui peut améliorer la fonctionnalité. code C'est un bon choix pour améliorer la réutilisabilité et réduire l'écriture de code répété.

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!