axios相关学习 丨Ajax

axios相关学习

1.1 什么是axios

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

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

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

1.2 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)
 })

1.3 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)
 })

1.4 直接使用axios发起请求

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

 

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

1. 直接使用axios发起GET请求

   
 axios({
     method: 'GET',
     url: 'http://www.liulongbin.top:3006/api/get',
     params: { // GET 参数要通过 params 属性提供
         name: 'zs',
         age: 20
     }
 }).then(function(res) {
     console.log(res.data)
 })

2. 直接使用axios发起POST请求

   
 axios({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/post',
     data: { // POST 数据要通过 data 属性提供
         bookname: '程序员的自我修养',
         price: 666
     }
 }).then(function(res) {
     console.log(res.data)
 })

更多Ajax内容：

黑马程序员AJAX零基础到精通_整合Git核心内容全套教程

---

黑马前端专栏干货多多，关注再学，好方便~

2023年前端学习路线图：课程、源码、笔记，技术栈另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~