《Vue.js3Web开发案例教程（在线实训版）》 课件 11-b AJAX与Axios（下）

vue.js

2024.7vue.js主讲：温谦第11章AJAX与Axios（下）认识AxiosAxios的基础用法DEMOGET与POSTDEMO嵌套请求与并发请求DEMOAxios的进阶用法实例的相关配置错误处理和拦截器DEMO实现自动提示的文本框模拟百度的“数据加载中”效果第11章

AJAX与Axios（下）

第11章AJAX与Axios（下）认识Axios如果使用VueCLI脚手架工具创建的项目，可以使用npm安装Axios：npminstallaxios--save如果为了调试一些简单页面，也可以直接在页面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX与Axios（下）Axios的基础用法importAxiosfrom'axios'Axios.get(url[,config]).then()Axios.post(url[,data[,config]]).then()第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）GET与POSTGET和POST区别POST请求参数的传递方式HTTP方法与RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）嵌套请求与并发请求并发请求：

Axios.all([Axios.get(get1),Axios.get(get2)]).then(Axios.spread((Res1,Res2)=>{console.log(Res1,Res2)}))嵌套请求：

//外层Axios.get(URL).then(//内层(response)=>Axios.get(URL,参数).then((response)=>{

//请求成功后要执行的内容}))第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）Axios的进阶用法创建实例其语法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//设置超时时长。默认请求未返回超过一秒，接口就超时了,//其他配置项……});第11章AJAX与Axios（下）实例的相关配置配置项举例说明url'/user'用于请求服务器的URLmethod'get'创建请求时使用的方法，还可以是'post','put','patch','delete',默认是getbaseURL'http://localhost:8080'将自动加在url前面，除非url是一个绝对URLheaders{'content-type':'application/x-www-form-urlencoded'}是即将被发送的自定义请求头params{id:1}请求参数拼接在url后面data{id:1}请求参数放在请求体里timeout1000指定请求超时的毫秒数(0表示无超时时间)，如果请求花费了超过timeout的时间，请求将被中断，为了不阻塞后面要执行的内容responseType'json'表示希望服务器响应的数据类型，还可以是'arraybuffer','blob','document','text','stream'，默认是json第11章AJAX与Axios（下）错误处理响应异常请求异常拦截器请求拦截器响应拦截器第11章AJAX与Axios（下）实例：实现自动提示的文本框第11章AJAX与Axios（下）DEMO第11章AJAX与Axios（下）练习：模拟百度的“数据加载中”效果第11章AJAX与Axios（下）DEMO第11章

AJAX与Axios（下）认识AxiosAxios的基础用法DEMOGET