uniapp requrst怎么设置公共头部（两种方法）-uni-app-PHP中文网

uniapp requrst怎么设置公共头部（两种方法）

PHPz

发布： 2023-04-17 10:30:27

原创

2334人浏览过

在开发过程中，我们经常会用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中文网其它相关文章！