axios请求头设置常见Content-Type和对应参数的处理

这篇具有很好参考价值的文章主要介绍了axios请求头设置常见Content-Type和对应参数的处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,Content-Type

首先要明确的一点是,我们在项目中调用接口,通常是以对象的数据格式传给自己封装的http请求函数的。

1,application/json

现在的前后端分离项目基本上都是使用的这个进行数据传递。
axios默认Content-type是采用application/json;charset=UTF-8,无需设置直接把对象传进去即可
当然,也可以在请求拦截器中转化成json后再发请求(但是不能用qs.stringify)

 config.data = JSON.stringify(config.data)

2,application/x-www-form-urlencoded

"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

用于表单的提交。值得注意的是,ajax 中(不是axios哈), contentType都是默认的值:application/x-www-form-urlencoded。
特点是提交的参数按照 key1=val1&key2=val2 的方式进行编码,key 和 val 会进行了 URL 转码。
而要实现这种参数的序列化,最简单的方法是引入qs库。做如下的配置。

import Qs from "qs"
 // 创建axios实例
    const service = axios.create({
      baseURL: process.env.VUE_APP_baseUrl,
      timeout: 5000,
     ...//其他配置
     //transformRequest用来对请求参数提前进行处理
      transformRequest: [data => Qs.stringify(data, { indices: true })] //Qs.stringify将参数序列化成key=value&key=value的形式,indices: true是配置参数有传数组的时候,以下标的形式
    })

比如说,当我们传递的参数是:

{
	title:'标题',
	list:[1,2,3]
}

则会被转化成:title=标题&list[0]=1&list[1]=2&list[2]=3的形式。

Qs.stringify(data, { indices: true }//这个如果用false的话。传数组就是title=标题&list=1&list=2&list=3的形式了,也就是不带索引。

结合上文,在content-tyoe=application/x-www-form-urlencoded时,我们在页面中传的是对象,然后通过Qs.stringify把参数转换成key=value的形式了,这才可以发出正确的http请求。
另外,Qs.stringify配置的场合也可以有多个。如下图在axios中进行配置。
axios请求头设置常见Content-Type和对应参数的处理

3,multipart/form-data

这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,就要让 form 的 enctype 等于这个值。这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。这个和application/x-www-form-urlencoded的区别在于一个适合传字段键值,一个适合传文件。

二,qs.sringify和JSON.stringify的区别

假设我要提交的数据是:

var a = {name:'hehe',age:10};

qs.stringify序列化结果如下

name=hehe&age=10

而JSON.stringify序列化结果如下:

"{"a":"hehe","age":10}"

三,项目中的实际应用

这个项目呢,大多数post请求,后端的接口设计的是application/x-www-form-urlencoded类型的content-type。唯独有一个接口设计的是application/json。但是我最开始content-type的设置是在全局的axios中进行配置的,全都配置成application/x-www-form-urlencoded。于是需要分类下,使用application/x-www-form-urlencoded的时候,需要key-value序列化处理,而另一种application/json的则不需要。

import axios from "axios"
import { Message as showMessage } from "element-ui"
import errorCode from "./errorCode"
// import store from "@/store"
import Qs from "qs"
// axios.defaults.headers["Content-Type"] = "application/json" //底下创建axios实例时配置了,这个不用重复配置,再说,这也是axios的默认配置
export default function request(options) {
  return new Promise((resolve, reject) => {
    // 创建axios实例
    const service = axios.create({
      // 表示请求URL公共部分,它会读取这里的值,然后拼接上页面使用的url
      baseURL: process.env.VUE_APP_baseUrl,
      timeout: 5000,
      withCredentials: false, // 跨域请求时是否需要cookie等凭证
      responseType: "json",
      params: {},
      maxContentLength: 2000,
      validateStatus: status => status >= 200 && status < 300, //默认值
      maxRedirects: 5, //最大允许重定向次数
      headers: {
        //公共请求头配置,本项目请求头大多数接口是这个,所以这里可以配置一下,对于特殊接口单独配置
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
      }
      // transformRequest: [data => Qs.stringify(data, { indices: true })] //将参数key=value序列化,因为本项目有的接口需要json/对象传参数,这里就不能这样直接全局配置,否则有的接口会报400(因为你把json或者是对象类型的数据,在这里key=value序列化了)
    })
    // request拦截器
    service.interceptors.request.use(
      config => {
        switch (config.method) {
          case "get":
            if (!config.params) {
              config.params = {}
            }
            break
          case "post":
            if (!config.data) {
              config.data = {}
            }
            if (config.type === "keyValue") {
              config.data = Qs.stringify(config.data) //配套application/x-www-form-urlencoded使用
            } else {
              config.headers["Content-Type"] = "application/json" //配套application/json使用
            }
            break
          default:
        }
        console.log(`【request】url:${config.url},data:${config.data} `)
        return config
      },
      error => {
        console.log(error)
        Promise.reject(error)
      }
    )

    // 响应拦截器
    service.interceptors.response.use(
      res => {
        // 未设置状态码则默认成功状态
        const code = parseInt(res.data.code) || 0
        // 获取错误信息
        const msg = res.data.msg || errorCode[code] || errorCode["default"]
        if (code != 0) {
          showMessage({
            message: msg,
            type: "error"
          })
          reject(new Error(msg))
          return
        } else {
          resolve(res.data) //获取到成功的响应了,就把结果resolve出去
        }
      },
      error => {
        console.log("err" + error)
        let { message } = error
        if (message == "Network Error") {
          message = "网络异常,请检查网络"
        } else if (message.includes("timeout")) {
          message = "系统接口请求超时,请检查网络"
        } else if (message.includes("Request failed with status code")) {
          message = "系统接口" + message.substr(message.length - 3) + "异常"
        }
        showMessage({
          message: message,
          type: "error",
          duration: 5 * 1000
        })
        return reject(error)
      }
    )
    service(options)
  })
}

然后请求的封装:

import request from "./request.js"
import { Loading } from "element-ui"
let http = {
  /** post 请求
   * @param  {接口地址} url
   * @param  {请求参数} params
   * @param  {请求的参数处理类型}
   * keyValue:默认的application/x-www-form-urlencoded,使用qs.stringify序列化。
   * json:使用application/json,不用处理参数
   */
  post: function (url, params, type = "keyValue") {
    let loadingInstance = Loading.service({
      lock: true,
      text: "请稍候",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
      fullscreen: false,
      customClass: "loadingClass"
    })
    return new Promise((resolve, reject) => {
      request({
        url,
        method: "post",
        data: params,
        type
      })
        .then(response => {
          loadingInstance.close()
          resolve(response)
        })
        .catch(error => {
          loadingInstance.close()
          reject(error)
        })
    })
  }
}
export default http

页面中使用application/json的接口的调用:

async newDog() {
      const that = this
      let params = {
        ...this.petForm
      }
      try {
        let res = await that.$http.post("/dog/newDog", params, "json")
        console.log("--接口请求成功--", res)
        that.$message({
          message: "接口请求成功",
          type: "success"
        })
      } catch (err) {
        console.log("报错了:", err)
      }
},

大致的设计思路:
axios请求头设置常见Content-Type和对应参数的处理文章来源地址https://www.toymoban.com/news/detail-406069.html

到了这里,关于axios请求头设置常见Content-Type和对应参数的处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 整理spring-web里支持的文件以及对应的Content-Type

    最近在弄文件上传、下载、在线预览时经常需要设置请求标头或者响应标头的Content-Type 属性。所以研究了一下spring支持哪些Content-Type,通过研究MediaTypeFactory.getMediaType的源码,可以得知spring是将支持的Content-Type 维护在/org/springframework/http/mime.types文件中。 通过上面查找文件的

    2024年02月09日
    浏览(40)
  • HTTP content-type内容类型的常见格式

    本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。 Content-Type(内容类型),一般是指

    2024年02月04日
    浏览(55)
  • HTTP请求头响应头的Content-type和Response Type是什么?

    写代码写着写着发现这些HTTP的概念还不清楚,缕一缕。 根据MDN的解释 Content-Type 实体头部用于指示资源的 MIME 类型 MIME 类型,即媒体类型,是一种标准,用来表示文档、文件或字节流的性质和格式。 根据MDN的解释: response.type的值可以是: basic 标准值,同源响应 cors 接收到一

    2024年02月15日
    浏览(51)
  • 请求头content-type的不同格式后端应该如何接收

    博客原文地址 \\\"Content-Type\\\" 是HTTP请求头中的一个标头,用于指示请求或响应中包含的实体的媒体类型。它告诉客户端如何处理响应中的数据,并通知服务器客户端正在发送的数据类型。它可以出现在请求或响应标头中。 Content-Type 的值通常由一个媒体类型和一个可选的字符集组

    2024年02月11日
    浏览(44)
  • Nginx:设置响应header的content-type

    Nginx通常根据/etc/nginx/mime.types文件中类型设置content-type 有时需要根据实际需要指定content-type,比如对于下载,如果按照mime.types里面的定义: image/jpeg                            jpeg jpg; 那么当下载图片时,浏览器会在窗口内直接显示图片,而不是另存为文件 。 通过设置

    2024年02月12日
    浏览(36)
  • postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)

    接口完成之后,自己使用postman测试了一下,没有问题; 可是在和小组前端调试接口的时候,他却说访问不了; 信息如下:(我自己写的一个打印请求信息的拦截器) 发现报错信息是:  Content type \\\'application/x-www-form-urlencoded;charset=UTF-8\\\' not supported 也就是说发送过来的内容格式

    2024年02月04日
    浏览(45)
  • http请求头Content-Type的值为text/plain报错415解决方案

    问题描述:http请求报错415,经过了解主要是请求头Content-Type的值为text/plain,为了方便演示,创建一个测试类 测试类 如果请求的请求头是text/plain,则会报错,错误码415 具体报错 解决方案很简单,直接用字符串接收参数就行,示例代码

    2024年02月15日
    浏览(57)
  • PHP用CURL发送Content-type为application/json的POST请求方法

    HELLO 各位伙伴,最近一直在做项目,没有及时更新。望请见谅。 今天,给大家讲一下php请求第三方接口的时候遇到的问题,大家都知道,在请求第三方接口的时候,会要求我们用post还是get来传参 一般我们传参的时候基本上都是form-data。有一些第三方为了安全或者是编码格式

    2024年02月10日
    浏览(53)
  • Http请求中Content-Type和Accept讲解以及在Spring MVC中的应用

    在Http请求中,我们每天都在使用Content-type来指定不同格式的请求信息,但是却很少有人去全面了解content-type中允许的值有多少,这里将讲解Content-Type的可用值,以及在spring MVC中如何使用它们来映射请求信息。 1.  Content-Type MediaType是Internet Media Type,互联网媒体类型;也叫做

    2023年04月21日
    浏览(42)
  • 微信小程序使用阿里云oss设置上传文件的content-type

    图片文件上传到阿里云oss的默认访问content-type是jpge,这个格式在浏览器不能直接打开,需要手动设置上传的content-type 参考链接 UploadTask wx.uploadFile(Object object) OSS调用PostObject用于通过HTML表单上传的方式将文件(Object)上传到指定存储空间(Bucket)。 阿里OSS 上传图片 springboo

    2024年02月12日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包