import 'axios'

// get传参数
axios.get('/user?id=123')
  .then(response=> {
    console.log(response)
  })
  .catch(error=> {
    console.log(error)
  });

// get传参数
axios.get('/getuser', {
    params: {
      ID: 123
    }
}) .then(response=> { 
    console.log(response) 
}) .catch(error=> { 
    console.log(error)
});

// post传参数
axios.post('/getuser', {
    params: {
      name: '小明',
      age:18
    }
}) .then(response=> { 
    console.log(response) 
}) .catch(error=> { 
    console.log(error)
});

通用写法

axios(
{
    url: 'api/getuser',
    method: 'post',//get
    data: {
        name:'张',
        age:18
    },
    headers:{'Content-Type':'multipart/form-data;charset=UTF-8'}
}
).then((res) => {
    console.log(res)
})

针对不同请求类型设置header  Content-Type

1、Content-Type: application/json

let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

 

2、Content-Type: multipart/form-data

let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

3、Content-Type: application/x-www-form-urlencoded

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

post上传的三种content-type类型详解可以查看:https://blog.csdn.net/qq_37818095/article/details/109983061

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐