从熟悉的 axios 上手 Postman

标签：axios Postman form application 熟悉 post data 请求

目录

1. get 请求
2. post 请求
3. 避免 400 状态码

一、get 请求

一般 get 请求的传参是把参数包含在 URL 中。浏览器当前的实现是不允许 get 发送 body, 但后端应用可以发送，比如 nodejs 或 postman。前端不能使用 get 方法从浏览器里发送 body，get 请求携带参数一般采用 params 传参。

（1） 在 axios 中发送 get 请求

// 第一种方式
axios.get('/api/getInfo',{
  params:{
    name:"seven"
  }
}).then(res => {
  console.log(res)
})
   
// 第二种方式 直接连接（不推荐）
axios.get('/api/getInfo?name=seven',{
  params:{}
}).then(res => {
  console.log(res)
})

因为涉及到跨域问题，还需要在 vue.config.js 中做一个代理。

module.exports = {
  outputDir: "dist",
  assetsDir: "assets",
  lintOnSave: false,
  devServer: {
    open: true,
    host: "localhost",
    port: "8081",
    https: false,
    hotOnly: false,
    proxy: {
      // 当访问 /api/xxx 时会被代理到 http://localhost:8080/xxx
      "/api": {
        target: "http://localhost:8080", 
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

（2） 在 Postman 中发送 get 请求

二、post 请求

POST 请求的消息主体放在 body 中，服务端根据请求头中的 Content-Type 字段来获取消息主体的编码⽅式，进⽽进⾏解析数据，这里主要介绍比较常用的 3 种类型。

1 application/x-www-form-urlencoded

最常见的 POST 提交数据的⽅式如果不设置 content-type 属性，默认为 application/x-www-form-urlencoded ⽅式提交数据，提交的表单数据会转换为键值对并按照 key1=val1&key2=val2 的⽅式进⾏编码，其中 key 和 val 都进⾏了 URL 转码。

（1） 在 axios 中发送 post 请求 (application/x-www-form-urlencoded)

// 第一种方式
// npm install qs --save 安装qs库
import qs from 'qs'
axios.post("/api/sendInfo", qs.stringify({
    name:'seven',
})).then((response) => {
    console.log(response.data);
});
   
// 第二种方式（不推荐）
axios.post("/api/sendInfo","name=seven").then((response) => {
  console.log(response.data);
});

（2） 在 Postman 中发送 post 请求 (application/x-www-form-urlencoded)

在 postman 中选择 body 下的 x-www-form-urlencoded 请求头会自动变成 Content-Type:application/x-www-form-urlencoded，无需我们手动在去修改请求头。

2 multipart/form-data

另⼀个常见的 POST 数据提交的⽅式，Form 表单的 Content-Type 设置为 multipart/form-data，它会将表单的数据处理为⼀条消息，以标签为单元，⽤分隔符分开。由于这种⽅式将数据有很多部分，它既可以上传键值对，也可以上传⽂件，甚⾄多个⽂件。

（1） 在 axios 中发送 post 请求 (multipart/form-data)

axios 在传递 json 序列化参数的时候默认的请求头是 application/json，所以在请求类型是 multipart/form-data 的时候需要单独指定请求头，否则就会变成 application/json。

// 需要手动设置请求头
let data = new FormData();
data.append('name','seven');
let config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}
axios.post("/api/sendInfo", data, config).then((response) => {
    console.log(response.data);
});

（2） 在 Postman 中发送 post 请求 (multipart/form-data)

postman 中选择 body 下 form-data 请求头会自动变成 Content-Type:multipart/form-data，无需我们手动在去修改请求头。

3 application/json

Content-Type: application/json 作为响应头⽐较常见。实际上，现在越来越多的⼈把它作为请求头，⽤来告诉服务端，消息主体是序列化后的 JSON 字符串，其中⼀个好处就是 JSON 格式⽀持⽐键值对复杂得多的结构化数据。

（1） 在 axios 中发送 post 请求 (application/json)

axios.post("/api/sendInfo", {
    name: "seven",
  })
  .then((response) => {
     console.log(response.data);
  });

（2） 在 Postman 中发送 post 请求 (application/json)

在 postman 中选择 body 下的 row 右侧类型选择 JSON 请求头会自动变成 Content-Type:application/json, 无需我们手动在去修改请求头。

注意：写内容的时候一定要是标准的 JSON 使用双引号。

注意

如果有二进制（非字母数字）数据（或相当大的有效载荷）要传输，请使用 multipart/form-data，其他情况建议使用 application/x-www-form-urlencoded 或者 application/json。

三、避免 400 状态码

很多时候接口调试得到 400 报错，很有可能就是传参设置不正确。出错时，不妨回过头来检查下是否格式正确。

标签：axios,Postman,form,application,熟悉,post,data,请求
From： https://www.cnblogs.com/sevenkiki/p/17169513.html