Using Axios to update SharePoint list

Question

Is anybody familiar with using REST API to update SharePoint lists using jquery? How can I convert this to Axios?

Here is the Code:

 function UpdateListItem() {  
        siteURL = _spPageContextInfo.webAbsoluteUrl;  
        console.log("from top nav - " + siteURL);  
        var apiPath = siteURL + "/_api/lists/getbytitle(''samplelist'')/items/getbyid(1)";  
        $.ajax({  
                url: apiPath,  
                type: "POST",  
                headers: {  
                    Accept: "application/json;odata=verbose"  
                },  
                data: "{__metadata:{'type':'SP.Data.YourlistnameListItem'},Title:”Ur input "  
            }  
            ",  
            async: false, success: function(data) {  
                alert("Item updated successfully");  
            }, eror: function(data) {  
                console.log("An error occurred. Please try again.");  
            }  
        });  
    }  
}

Answer 1

The following example code about update list item using jQuery Ajax and Axios post method with REST API for your reference.

jQuery Ajax with SharePoint REST API:

<input id="UpdateItem" type="button" value="Update Item" onclick="UpdateListItem()"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function UpdateListItem(){
    var listName="samplelist";
    var itemId=1;
    var itemType = GetItemTypeForListName(listName);
    var item = {
        "__metadata": { "type": itemType },
        "Title": "test"    
    };    
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items/getbyid("+itemId+")",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "X-HTTP-Method": "MERGE",
            "If-Match": "*"
        },
        success: function (data) {
            console.log('Success');            
        },
        error: function (data) {
            console.log(JSON.stringify(data));
        }
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
} 
</script>

axios post with SharePoint REST API:

<input id="UpdateItem" type="button" value="Update Item" onclick="UpdateListItem()"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script type="text/javascript">
function UpdateListItem(){
    var listName="samplelist";
    var itemId=1;

    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName+ "')/items/getbyid("+itemId+")";
    var configAxios = {
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value,
            "X-HTTP-Method": "MERGE",
            "If-Match": "*",
            "Content-Type":"application/json;odata=verbose"
        }   
    };
    var itemType=GetItemTypeForListName(listName);
    var data = {
        "__metadata": {"type": itemType },
        "Title": "MyTest"
    };
    axios.post(url,data,configAxios).then(function(req){         
        console.log('Success');
    }).catch(function(err){
        console.log('error during http call', err);
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>