使用axios发起get请求和post请求(代码片段)

咖啡壶子 咖啡壶子     2023-01-26     792

关键词:

axios(⭐⭐⭐)

什么是axios

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象,axios 简单易用

相比于 jQueryaxios 更加轻量化,只专注于网络数据请求。

axios发起GET请求

axios 发起 get 请求的语法:

axios.get('url',  params:  /*参数*/  ).then(callback)

具体的请求示例如下:

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj =  name: 'zs', age: 20 
// 调用 axios.get() 发起 GET 请求
axios.get(url,  params: paramsObj ).then(function(res) 
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
)

axios发起POST请求

axios 发起 post 请求的语法:

axios.post('url',  /*参数*/ ).then(callback)

具体的请求示例如下:

// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj =  location: '北京', address: '顺义' 
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) 
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
)

直接使用axios发起请求

axios 也提供了类似于 jQuery$.ajax() 的函数,语法如下:

axios(
 method: '请求类型',
 url: '请求的URL地址',
 data:  /* POST数据 */ ,
 params:  /* GET参数 */ 
).then(callback)

发起get请求

document.querySelector('#btn3').addEventListener('click', function () 
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData =  name: '钢铁侠', age: 35 
      axios(
        method: 'GET',
        url: url,
        params: paramsData
      ).then(function (res) 
        console.log(res.data)
      )
)

发起post请求

document.querySelector('#btn4').addEventListener('click', function () 
  axios(
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: 
      name: '娃哈哈',
      age: 18,
      gender: '女'
    
  ).then(function (res) 
    console.log(res.data)
  )
)

教你用三种不同方式获取get和post请求(代码片段)

...服务器提交数据 3.$.ajax()既可以获取也可以提交数据 ①使用$.ajax()发起GET请求(只需要将type属性设置为'GET'即可)  ②使用$.ajax()发起POST请求  查看详情

vue---进行post和get请求(代码片段)

参考文档:https://www.jb51.net/article/125717.htm使用axios<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>基本使用方法:get请求:6789101112131415161718192021//Makearequestforauserwithagiven 查看详情

ajax基础3--使用原生xhr发起get,post请求(代码片段)

使用原生js发起ajax请求`XMLHttpRequest`的基本使用什么`XMLHttpRequest`使用`xhr`发起GET请求(⭐⭐⭐)了解`xhr`对象的`readyState`属性使用`xhr`发起带参数的GET请求查询字符串什么是查询字符串GET... 查看详情

golang使用httpclient发起get和post请求示例

【转自http://www.01happy.com/golang-http-client-get-and-post/ 】 get请求get请求可以直接http.Get方法,非常简单。1234567891011121314funchttpGet(){    resp,err:=http.Get("http://www.01happy.com 查看详情

golang使用httpclient发起get和post请求示例

golang要请求远程网页,可以使用net/http包中的client提供的方法实现。查看了官方网站有一些示例,没有太全面的例子,于是自己整理了一下。get请求get请求可以直接http.Get方法,非常简单。1234567891011121314funchttpGet(){   &n... 查看详情

web前端-ajax基础学习(代码片段)

....3.2实现简易的模版引擎3.Ajax加强学习3.1XMLHttpRequest的基本使用3.1.1xhr对象发送GET请求3.1.2URL的编码和解码3.1.3xhr发送POST请求3.2数据交换格式3.2.1XML3.2.2JSON3.3封装自己的Ajax函数3.4XMLHttpRequestLevel2的新特性3.5jQuery高级用法3.6axios3.6.1axios... 查看详情

axios笔记(代码片段)

目录1.基本使用1.1默认使用get方式请求1.2使用get方式无参请求:1.3使用get方式有参请求:1.4使用get方式有参其他方式请求:1.5使用post方式无参请求:1.6使用post方式有参请求:2.axios请求方式2.1axios.get方式发送无... 查看详情

mock模拟数据,并发起get,post请求(保姆级教程,一定能成功)(代码片段)

Mock模拟数据,并发起get,post请求(保姆级教程,一定能成第一步,创建一个脚手架项目。创建完成,在控制台安装mockjs,和axios安装完成之后,重点来了,先在src文件夹下创建一个mock文件夹,然... 查看详情

mock模拟数据,并发起get,post请求(保姆级教程,一定能成功)(代码片段)

Mock模拟数据,并发起get,post请求(保姆级教程,一定能成第一步,创建一个脚手架项目。创建完成,在控制台安装mockjs,和axios安装完成之后,重点来了,先在src文件夹下创建一个mock文件夹,然... 查看详情

flutter--进阶网络请求(代码片段)

...tp库3.1get请求3.2post请求Flutter的请求网络有多种方式:使用dartio中的HttpClient发起的请求使用dio库使用http库。1.dartio发起的请求1.1get请求import'dart:io';//导IO包imp 查看详情

axiso的使用(代码片段)

Vue官方推荐的ajax请求框架叫做:axiosaxios的Get请求语法:axios.get("/item/category/list?pid=0")//请求路径和请求参数拼接.then(function(resp) //成功回调函数).catch(function() //失败回调函数)//参数较多时,可以通过params来传递参数axios.get("/item/ca... 查看详情

axios入门使用(代码片段)

官方文档:axios中文文档|axios中文网|axiosAxios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性从浏览器中创建 XMLHttpRequests从node.js创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求... 查看详情

什么是axios?(代码片段)

...是Axios?        1.axios的特性        2.axios的使用     二.Axios的实际应用       1.axios请求的方式       2.axios的适用场景     三.Axios和ajax的区别        1.axios和ajax的区别       2.两者各自的优缺点... 查看详情

从零开发区块链应用--golang网络请求(代码片段)

文章目录一、http请求简介二、初始化客户端三、golang发起GET请求3.1GET请求方法3.2基本的GET请求3.3带参数的GET请求四、golang发起POST请求4.1POST请求方法4.2不带参数的POST请求4.3不带参数的POST请求五、小结5.1HTTP协议请求方法5.2POST和GE... 查看详情

axios.post 正在发送一个 GET 请求

...est【发布时间】:2018-03-1814:05:10【问题描述】:我有一个使用react/axios的chrome扩展。在那个应用程序中,我正在发送一个发布请求,如下所示:exportconstcreateComment=payload=>consturl=`$COMMENTS_BASE_URL`;constprom 查看详情

为啥 POST 请求在 Microsoft Edge 中变为 GET 请求?

...:2020-03-2405:18:46【问题描述】:我在我的前端应用程序中使用Axios和React。当我尝试使用Axios(xhr,fetch)通过HTTPS发送POST请求并遇到 查看详情

axios学习(代码片段)

...CRUD操作一个请求路径只对应一个操作一般只有GET/POST二、使用j 查看详情

怎样将axios对象obj数据的post请求转化为formdata格式(代码片段)

在用axios请求接口的时候,get和post方法是用的最多的请求方法,get请求发送基本上没什么问题,但是post请求可就没那么好对付了。假如不对其做处理,就会导致后台怎么都接收不到数值。而且查了蛮多方法,... 查看详情