uniapp requrst怎麼設定公共頭（兩種方法）

在開發過程中，我們常會用UniApp來建立跨平台的應用程式。 UniApp是一個基於Vue.js的開源框架，它能夠將Vue.js的核心和一些跨平台的能力打包在一起，提供了一套完整的開發體驗。而在開發過程中，我們常常會需要發送網路請求來取得數據，此時，我們就需要設定一些公共頭部參數，以此來保障請求的準確、有效。

UniApp中，我們可以使用封裝好的uni.request來傳送網路請求。 uni.request具有很好的跨平台效能，在UniApp中封裝了原生的XMLHttpRequest和原生的axios擴展，可以用於發起HTTP/HTTPS請求。而對於設定公共頭部參數，有以下兩種常用方法。

方法一：在request的options中設定

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

其中，在main.js中定義了$ttp方法，在options中設定了公共頭部參數，呼叫時傳入具體的參數即可。

方法二：透過攔截器統一設定

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

在此方法中，我們定義了一個request函數，在函數中透過攔截器攔截請求並設定公共頭部參數，然後透過uni.request來發起請求。呼叫request時，只需要傳入具體的參數即可。

綜上所述，我們可以看到，UniApp設定公共頭部參數的方法並不難，只需要在uni.request的options中設定即可，也可以透過攔截器統一設定，這樣可以提高程式碼的複用性，減少重複程式碼的編寫，是一個不錯的選擇。

以上是uniapp requrst怎麼設定公共頭（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！