关于Axios发请求(get或post)数据参数问题

米柆

已于 2024-01-11 10:47:45 修改

阅读量518

点赞数

分类专栏： Millia's work 文章标签： javascript java 开发语言

于 2023-06-13 15:53:00 首次发布

本文链接：https://blog.csdn.net/millia/article/details/131188647

版权

Millia's work 专栏收录该内容

53 篇文章 4 订阅

订阅专栏

版本说明：

//package.json

{

 ......


  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "vant": "^3.6.4",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0",
    "weixin-js-sdk": "^1.6.0"
  },

 
.......

}

仅简单配置Axios（没有封装get和post方法）

Axios中文文档

GET参数{params:{参数名:值}} 即{params:{paramName:paramValue}}

const getContent = () => {
  let params = {
    course_id:proxy.$route.params.course_id
  }
  let param = {
    course_id:proxy.$route.params.course_id
  }
  //proxy.$milliaAxios.get(baseUrl,{params}).then(response => {
  //proxy.$milliaAxios.get(baseUrl,{params:param}).then(response => {
  proxy.$milliaAxios.get(baseUrl,{params: {course_id:proxy.$route.params.course_id}}).then(response => {
    console.log(response.data)
  })
}
//axois.get(地址,{params}).then(response=>{})  
//{params}、{params:param}和{params:{course_id:proxy.$route.params.course_id}} 都可以
/*
注：{params}键值需相同，
即为{params:params = {course_id:proxy.$route.params.course_id}}
解析为params:{course_id:proxy.$route.params.course_id}
*/

POST参数 {参数名:值}即{paramName:paramValue}

const goTag = () => {
  let params = {
    activeId:store.state.activityID
  }
  proxy.$milliaAxios.post(baseUrl,params).then(response => {
    console.log(response.data)
}
//axois.post(地址,params).then(response=>{})  
//注：params实际为{activeId:store.state.activityID}

直接使用axios发送请求

//POST方法
axios({
    method:'POST',
    url:'请求的URL地址',
    data:{POST数据参数},    //POST 数据参数使用data属性提供
}) .then(function(res){
    console.log(res.data)
})



//GET方法
axios({
    method:'GET',
    url:'请求的URL地址',
    params:{GET数据参数}    //GET 数据参数使用params属性提供
}) .then(function(res){
    console.log(res.data)
})

附：Vue3：Axios配置及使用