本文主要是介绍axios教程01-基本使用流程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- axios官网文档：http://www.axios-js.com/
| jQuery与axios对比 | jQuery | axios |
|---|---|---|
| 1.ajax技术底层原理 | XMLHTTPRequest | XMLHTTPRequest |
| 2.体积大小 | 大（包含大量dom操作与ajax） | 小(只有ajax请求) |
| 3.是否支持ES6的Promise | 不支持（底层使用其他方案模拟实现） | 支持基于原生Promise封装 |
| 4.兼容性 | 好 （兼容性是jQuery的强项） | 一般(使用了新技术) |
1.1-axios基本使用
/*
1.学习目标介绍 ： axios学习(1) 了解axios作用 ： 发送ajax请求(2) axios发送get请求(3) axios发送post请求
2.学习路线(1)axios特点 （与jQuery区别）* axios优点a.体积小，只有发送ajax功能 （jQuery体积大，有一堆的DOM操作方法在vue中用不上）b.技术先进：基于Promise技术封装ajax* axios缺点a.浏览器兼容性不好（技术太先进了）(2)axios基本使用axios.get().then().catch().then();axios.post().then().catch().then();a. get()里面写url和参数b. 第一个then() 表示成功回调 ,相当于jq里面的successc. catch() 表示失败回调d. 第二个then() 表示完成回调：无论成功失败都会执行(3)axios发送get请求传参(4)axios发送post请求传参
*/
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="btn1">基本使用</button><button id="btn2">点我发送get请求</button><button id="btn3">点我发送post请求</button><!-- 导入axios --><script src="./axios.js"></script><script>/*1.学习目标介绍 ： axios学习(1) 了解axios作用 ： 发送ajax请求(2) axios发送get请求(3) axios发送post请求2.学习路线(1)axios特点 （与jQuery区别）* axios优点a.体积小，只有发送ajax功能 （jQuery体积大，有一堆的DOM操作方法在vue中用不上）b.技术先进：基于Promise技术封装ajax* axios缺点a.浏览器兼容性不好（技术太先进了）(2)axios基本使用axios.get().then().catch().then();axios.post().then().catch().then();a. get()里面写url和参数b. 第一个then() 表示成功回调 ,相当于jq里面的successc. catch() 表示失败回调d. 第二个then() 表示完成回调：无论成功失败都会执行(3)axios发送get请求传参(4)axios发送post请求传参*///基本使用btn1.onclick = function () {/* get() : 写url和请求参数then(res=>{}) : 成功回调， 相当于以前jq的successcatch(err=>{}):失败回调， 一般可以省略不写then(()=>{}):完成回调， 表示请求完成，无论成功失败都会执行。一般可以省略不写*/axios.get('https://autumnfish.cn/api/joke').then(res => {//请求成功console.log(res);}).catch(err => {//请求失败console.log(err);}).then(() => {//请求完成console.log('本次请求完成');});};//get请求btn2.onclick = function () {//get方法第一个参数是url//get方法第二个参数是对象类型 { params:{get参数对象} }axios.get('https://autumnfish.cn/api/joke/list', {params: {num: 10}}).then(res => {//请求成功console.log(res);});};//post请求btn3.onclick = function () {//post方法第一个参数是url//post方法第二个参数是对象类型 { post参数对象 }axios.post('http://ttapi.research.itcast.cn/mp/v1_0/authorizations', {mobile: '18801185985',code: '246810'}).then(res => {//请求成功console.log(res);});};</script>
</body></html>
这篇关于axios教程01-基本使用流程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
