axios 之get、post传参请求解析

时间：2024-11-12 21:24:15

axios get | post传参方法整理_axios post传参_白瑕的博客-****博客

axios post params(post像get一样使用params传参)_axios.post() 的params传参_潇蓝诺依的博客-****博客

Axios post 传参的params 与data 的两种形式（根据java后台接口来选择）_axios post params_bug收集的博客-****博客

axios介绍
axios是基于Promise的，因此可以使用Promise API

axios的请求方式：

axios(config)
(config)
(url [,config])
(url [,data [,config]])
(url [,data [,config]])
(url [,config])
(url [,data [,config]])
(url [,config])

//头部设置了 application/x-www-form-urlencoded 这个的
['Content-Type'] = 'application/x-www-form-urlencoded';

//传参里面需要

//需要qs转
export function shopPassExamine(info) {
    const data = (info)
    return request({
        url:'/shop/passExamine',
        method:'post',
        data: data
    })
}

//直接传：
['Content-Type'] = 'application/json';
// 待确认线索视频截取
export function videoSplitJiaoFu (info) {
  const data = info;
  return request({
    url: '/api/pa-service-live/live/clue/confirm/videoSplit',
    headers: { systemRoute: systemRoute,
      'Content-Type':'application/json'
     },
    method: 'post',
    data
  });
}

前言
默认params是添加到url的请求字符串中的，一般用于get请求，delete请求方式跟get类似

接口形式是/create?name=***&age=****

get请求没有data方式！！！
默认data是添加到请求体（body）中的， 一般用于post请求。

上面只是一般情况，其实，post请求也可以使用params方式传值(像上面的接口形式) ，

但是get请求没有data方式

本文就来介绍一下post的两种传值方式↓

Axios 中posts的params与data的两种传参

第一种：data方式 后端接受body-json形式

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   data:{
      username: ,
      pwd: 
   }
}).then((res) => {
  (res)
})

第二种：params方式 接口形式是/create?name=***&age=**** 参数为url拼接形式

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   params:{
      username: ,
      pwd: 
   }
}).then((res) => {
  (res)
})

注：直接使用post方法，传递的参数为 data 的方式 代码如下↓

 (url [,data [,config]])

 
this.$('/api/user/login',{username: , pwd:  }),
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
  (res)

一、GET

后端接收query

前端传params.
前端:

axios({
  method: "get",
  url: "http://localhost:3000/getArticleById",
  params: {
    article_id: 8,
  },
}).then((res) => {
  (res);
});

   

二、POST

1.后端接收body - json

前端传data.
前端:

axios({
  method: "post",
  url: "http://localhost:3000/getArticleById",
  data: {
    article_id: 8,
  },
}).then((res) => {
  (res);
});

/* 
等同于
("http://localhost:3000/getArticleById", {
  article_id: 8
}).then()
*/

 在这里插入图片描述

2.后端接收query 接口形式是/create?name=***&age=****,但是是一个post请求,我只见过get的这种请求

前端传params.
前端:

axios({
  method: "post",
  url: "http://localhost:3000/getArticleById",
  params: {
    article_id: 8,
  },
}).then((res) => {
  (res);
});


发表的axios签名是(url[, data[, config]])。所以你想在第三个参数中发送params
.post(`/create`, null, { params: {
  name:name,
  age:age
}})
.then(response => )
.catch(err => (err));

在这里插入图片描述

post携带form-data参数

import axios from 'axios';

// 创建一个FormData对象
const formData = new FormData();
('name', 'John Doe');
('age', 30);

// 使用FormData对象发送POST请求
('/api/user', formData)
  .then(function (response) {
    (response);
  })
  .catch(function (error) {
    (error);
  });


其他：
import qs from 'qs';
(url,qs .stringify({jobNumber: '430525', password: '123'}), 
    {headers: {'Content-Type':'application/x-www-form-urlencoded'}}
);

Config配置选项

{
    //服务器的地址，是必须的选项
    url: '/user',
        
    //请求的方式，若没有则默认是get
    method:'get',
        
    //如果url不是绝对地址，则会加上baseURL
    baseURL: 'http://localhost:3000/',
       
    //transformRequest允许请求的数据在发送至服务器之前进行处理，这个属性只适用于put、post、patch方式
    //数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer'，'Formdata'，
    //若函数中用到了headers，则需要设置headers属性    
    transformRequest: [function(data,headers){
        //根据需求对数据进行处理
        return data;
    }],    
    
    //transformResponse允许对返回的数据传入then/catch之前进行处理    
    transformResponse:[function(data){
        //依需要对数据进行处理
        return data;
    }],   
    
    //headers是自定义的要被发送的信息头
    headers: {'X-Requested-with':'XMLHttpRequest'},
        
    //params是请求连接中的请求参数，必须是一个纯对象
    params:{
      ID:12345  
    },    
    
    //paramsSerializer用于序列化参数
    paramsSerializer: function(params){
      return (params,{arrayFormat:'brackets'});  
    },     
    
    //data是请求时作为请求体的数据——
    //只适用于put、post、patch请求方法
    //浏览器:FormData，File，Blob;Node:stream
    data:{
      firstName: 'simon',  
    },    
    
    //timeout定义请求的时间，单位是毫秒，如果请求时间超过设定时间，请求将停止
    timeout:1000,
        
    //withCredentials表明跨跨域请求书否需要证明。
    withCredentials:false, //默认值
        
    //adapter适配器，允许自定义处理请求
    //返回一个promise
    adapter:function(config){
        /*...*/
    },    
     
    //auth表明HTTP基础的认证应该被使用，并提供证书
    auth:{
      username:'simon',
      password:'123456',    
    },    
    
    //responseType表明服务器返回的数据类型，这些类型包括：json/blob/document/ 		arraybuffer/text/stream    
     responseType: 'json',   
         
     //proxy定义服务器的主机名和端口号
     //auth属性表明HTTP基本认证应该跟proxy相连接，并提供证书
     //这将设置一个'Proxy-Authorization'头(header)，覆盖原来自定义的
     proxy:{
         host:127.0.0.1,
         port:8080,
         auth:{
             username:'simon',
             password:'123456'    
         }    
     },   
     
     //取消请求
     cancelToken: new CancelToken(cancel=>{})    
}

相关文章