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

目录
相关文章
|
7月前
uniapp怎么动态渲染导航栏的title?
uniapp怎么动态渲染导航栏的title?
|
7月前
uniapp Vue3 面包屑导航 带动态样式
uniapp Vue3 面包屑导航 带动态样式
141 1
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
uniapp动态禁用mescroll-body组件的下拉刷新,或者动态禁用mescroll-body组件的上拉加载
418 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的宝鸡文理学院学生成绩动态追踪系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的宝鸡文理学院学生成绩动态追踪系统附带文章和源代码部署视频讲解等
42 0
|
7月前
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
410 1
uniapp App端 解决input@input事件动态修改值不生效的问题
uniapp App端 解决input@input事件动态修改值不生效的问题
305 0
|
存储 前端开发 容器
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
146 0
|
索引
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
【 uniapp - 黑马优购 | 分类界面 】创建cate分支、数据获取、动态渲染
160 0