Uniapp~动态修改 请求头的content-type 的值

简介: Uniapp~动态修改 请求头的content-type 的值

1、创建request全局配置文件

在uniapp官网有这样一段话:


header默认的请求时 header['content-type'] 为 application/json

对于 POST 方法且 header['content-type'] 为 application/json 的数据,会进行 JSON 序列化。

对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

在全局配置文件中设置 请求拦截,通过拦截到的 自定义接口传参  判断是否修改header里面的content-type传参形式;

module.exports = (vm) => {
  // 初始化请求配置 
  // 设置跨域问题
  // #ifdef H5
  // 此为自定义配置参数,具体参数见上方说明
  uni.$u.http.setConfig({
  baseUrl: 'api',
  loadingText: '努力加载中~',
  loadingTime: 800,
  // ......
  });
  // #endif
// #ifndef H5
  // 此为自定义配置参数,具体参数见上方说明
  uni.$u.http.setConfig({
  baseUrl: 'http://192.168.xx.xx:xxxxx',
  loadingText: '努力加载中~',
  loadingTime: 800,
  // ......
  });
  // #endif 
  // 请求拦截
  uni.$u.http.interceptor.request = (config) => {  
    //通过 CONTENTTYPE 自定义的请求参数来判断的 是requestBody传参还是普通的query传参请求
  config.header['Content-Type'] =  config.header.CONTENTTYPE || 'application/json'
  return config
  }, config => { // 可使用async await 做异步操作
  return Promise.reject(config)
  }
}

在main.js中使用

import App from './App'
App.mpType = 'app'
const app = new Vue({
  ...App
}) 
// 引入请求封装,将app参数传递到配置中
require('@/config/request.js')(app)

2、请求得api封装

const http = uni.$u.http
//通过自定义的 CONTENTTYPE 来修改是 query 传参模式
export const httpCustom= (params = {}) => http.post('url', params, {
  'CONTENTTYPE': 'application/x-www-form-urlencoded'
})
//这个是是 requestBody 传参模式 不需要传 CONTENTTYPE 
export const http= (data) => http.post('url', data)

uniapp官网~网络

https://uniapp.dcloud.io/api/request/request.html

image.png

目录
相关文章
|
3月前
uniapp怎么动态渲染导航栏的title?
uniapp怎么动态渲染导航栏的title?
|
4月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
57 1
|
9月前
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
183 0
|
5月前
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
100 1
|
6月前
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
82 0
|
7月前
|
存储 前端开发 容器
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
40 0
|
7月前
|
索引
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
81 0
uniapp动态获取中间内容高度demo效果(整理)
uniapp动态获取中间内容高度demo效果(整理)
|
数据安全/隐私保护
uniapp动态切换显示不同内容组件
通过点击注册或是登录按钮切换不同的组件.默认显示登陆界面,登录字样加粗显示,登录页面显示手机号密码登录.
uniapp动态切换显示不同内容组件
|
小程序 JavaScript 数据库
小程序(uniapp)动态获取当前时间
小程序(uniapp)动态获取当前时间
小程序(uniapp)动态获取当前时间