有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

axios content-type(使用axios请求接口)几种content-type的区别

代码编程 炮渣日记 4周前 (11-13) 19次浏览 已收录 0个评论 扫描二维码

axios的使用

  • 安装(一般使用框架的话, 脚手架都集成了)
$ npm install axios
  • 请求示例
// POST方式
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// GET方式
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 执行多个并发请求
axios.all([get1(), get2()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
  • 可以通过向 axios 传递相关配置来创建请求

语法: axios(config)

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

这里, 我就拿以POST的方式传递相关配置来说事, 因为笔者在这里躺了两次坑, 很有必要记录一下, 哈哈.

  • 默认情况下, 不写content-type, 是以json的方式来传递, (Content-Type: application/json;charset=UTF-8)
axios({
    url:'/api/connect/token',
    method: 'post',
    data: {
         firstName: 'Fred',
         lastName: 'Flintstone'
        }
    }).then(res => {
        console.log(1234, res.data)
    }).catch(error => {
        console.log(error)
    })

请求头如下:

Request Payload
{ firstName: "Fred", lastName: "Flintstone"}
  • content-type改成x-www-form-urlencoded, 即表单提交方式
axios({
    url:'/api/connect/token',
    method: 'post',
    data: {
         firstName: 'Fred',
         lastName: 'Flintstone'
        },
    headers: {
         'Content-type': 'application/x-www-form-urlencoded'
        }
    }).then(res => {
        console.log(1234, res.data)
    }).catch(error => {
        console.log(error)
    })

请求头如下:

Form Data
{"firstName":"Fred","lastName":"Flintstone"}: 
  • 另一种情况, 序列化成字符串形式传递
axios({
    url:'/api/connect/token',
    method: 'post',
    data: JSON.stringify({
         firstName: 'Fred',
         lastName: 'Flintstone'
        })
    }).then(res => {
        console.log(1234, res.data)
    }).catch(error => {
        console.log(error)
    })

结果跟上面一致:

Form Data
{"firstName":"Fred","lastName":"Flintstone"}: 
  • 还有一种常见情况, 通过qs库对数据进行编码(前提要安装qs)
import qs from 'qs'
axios({
    url:'/api/connect/token',
    method: 'post',
    data: qs.stringify({
         firstName: 'Fred',
         lastName: 'Flintstone'
        })
    }).then(res => {
        console.log(1234, res.data)
    }).catch(error => {
        console.log(error)
    })

结果:

Request Headers
Content-Type: application/x-www-form-urlencoded
Form Data

firstName: Fred
lastName: Flintstone

使用qs要注意的点 :

  • allowDots(多层对象嵌套, 可用.标记)
qs.stringify({ 
    a: { 
        b: { 
            c: 'd', e: 'f' 
        } 
    } 
}, { allowDots: true });
// 'a.b.c=d&a.b.e=f'

好了,就写到这里,同学们在跟服务端对接接口过程中出现问题,可以多对传递的格式做调试,那么就能发现其中的变化,就能定位到问题所在。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址