axios教程01-基本使用流程

本文主要是介绍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>