vue中axios的get、post请求传参方式

2,388 阅读1分钟

一、get请求

  • get一般是从服务器上获取数据,本质是'得'
  • get请求能够被缓存
  • get发送请求时,URL中除了资源路径以外,所有的参数(查询字符串)也包装在URL中,因此容易泄漏数据,不安全

二、post请求

  • post是向服务器提交数据,本质是'给'
  • post请求不能够被缓存
  • post请求的参数默认放在body中,较安全

三、get请求与post请求的区别

  • get请求参数是params,而post请求的参数是data。
  • get请求的参数在发送请求时会拼接到url后面,而post的参数再请求体中。

get请求:(方法一)

axios({
                url: "http://localhost:9090/api/image/",
                method: "get",
                params: params
            })

 export let getStats = (a) => { 
       return axios({ 
           url: "/login",
           method: "get", 
           // 传参 
           params: { user: '123123' }
       }); 
   }

(方法二)

axios.get('/user?id=12345&name=user')
.then(function (res) {   
 console.log(res);
 })
 .catch(function (err) {  
   console.log(err);
   });

(方法三)

//或直接{id:12345,name:'wmh'}
axios.get('/user',{params:{id:12345,name:'wmh'}})
.then(function (res) {   
 console.log(res);
 })
 .catch(function (err) {  
   console.log(err);
   });

poat请求:(方法一)

axios({
                url: "http://localhost:9090/api/image/",
                method: "post",
                data: params,
            })

export let postStats = (a) => { 
       return axios({ 
           url: "/regiser",
           method: "post", 
           // 传参 
           data: { user: '123123' }
       }); 
   }

(方法二)

var readyData={  
  id:1234,    
  name:user
};
//或
//var readyData=JSON.stringify({  
// id:1234,    
// name:user
   });
//这里的readyData参数默认放在请求体中
axios.post("/notice",readyData)
 .then((res) => {return res}) 
 .catch((err) => {return err})

四、post像get一样使用params传参

当用axios发起post请求,但是参数不是放在请求体而是像get一样拼接在url后面的情况下:

.post('url', null, { params: {
  name:name,
  age:age
}})
.then(response => response.status)
.catch(err => console.warn(err));