axios中的GET POST PUT PATCH

博客介绍了常见HTTP请求方法,包括GET用于获取数据、POST用于提交数据、PUT更新全量数据、PATCH更新部分数据、DELETE删除数据,还提及一个简单请求示例,以及POST方法提交,同时说明了PUT和PATCH请求中params和data在参数传递上的区别。

1.GET:用域获取数据
2.POST:用于提交数据
3.PUT :更新数据(吧所有数据推送到后端)
4.PATCH:更新数据(只推送修改的数据到后端)
5.DELETE:删除数据
一个简单的请求
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

axios({
      method:'GET',
      url:'/data.json',
      params:{
      //传递的参数
      id:12
      //在URL中为
      //http://localhost:8080/data.json?id=12
      }
    })
    .then(res=>{
      console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })
    //当然这个也可以这样写
    /*let request=axios.create({
    	baseURL:"http://localhost:8080",
    	timeout:1000
    })
    request.get("/data.json").then.....*/

POST方法提交

 axios({
            method:'POST',
            url:'/post',
            data:data
            //提交的数据用data表示
        })
        .then(res=>{
            console.log(`res ->${res}`);
        })
        .catch(err=>{
            console.log(err);
        })

PUT请求和PATCH请求

axios({
            method:'PUT',
            url:'/put'
        })
        .then(res=>{
            console.log(`res ->${res}`);
        })
        .catch(err=>{
            console.log(err);
        })
        axios({
            method:'PATCH',
            url:'/patch'
        })
        .then(res=>{
            console.log(`res ->${res}`);
        })
        .catch(err=>{
            console.log(err);
        })

这里params和data的区别就是params是在URL进行参数传递的,而data不是

axios是一个基于Promise的HTTP库,它非常适合在浏览器和Node.js环境中进行异步数据交互,特别是对于那些需要处理跨域请求的应用。axios提供了一个简单的API,可以方便地封装GETPOST以及其他常见的HTTP请求。 1. **GET 请求**: ```javascript import axios from 'axios'; const getSomeData = async () => { try { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } catch (error) { console.error(error); } }; ``` 在这个例子中,`axios.get()`方法接收URL作为参数,并返回一个Promise,当请求成功时解析响应数据。 2. **POST 请求**: ```javascript const postData = async (data) => { try { const response = await axios.post('https://api.example.com/submit', data); console.log(response.data); } catch (error) { console.error(error); } }; ``` 这里,我们传递数据给`axios.post()`,用于发送POST请求到指定的URL并携带数据。 3. **其他请求**: Axios还支持PUT、DELETE、PATCH等其他HTTP方法,只需相应地替换`get`或`post`即可,例如: ```javascript const updateItem = async (id, newData) => { try { const response = await axios.put(`https://api.example.com/items/${id}`, newData); console.log(response.data); } catch (error) { console.error(error); } }; ``` 在实际使用中,axios通常会配合拦截器(interceptors)来进行错误处理、添加请求头等定制化操作。这样可以使得API请求的编写更为简洁和模块化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值