Ajax技术和Axois工具库

前端如何才能动态展示数据如何动态获取后端的数据呢目录文章目录一、什么是Ajax?二、什么是Axios?核心用途三、如何在Vue项目中使用Axios?1、安装Axios2、引入Axios3、基础使用4、拦截器5、async/await是什么总结一、什么是Ajax?Ajax是一种技术概念。全称异步的JavaScript和XML是浏览器原生的通信方式不用刷新页面就能和服务器异步请求数据原生用XMLHttpRequest实现二、什么是Axios?Axios 是一个第三方库是封装好的、更好用的 Ajax 工具库用于快速开发。专门给 Vue/React 等项目用语法更简洁、支持拦截器、超时设置、自动转换 JSON。核心用途1、前端向后端发网络请求GET/POST/PUT/DELETE2、异步获取后台数据页面不用刷新3、统一请求 / 响应拦截加 token、统一报错、加载动画4、自动转换 JSON不用手动解析5、支持请求超时、取消请求、并发请求6、浏览器和 Node.js 都能用Vue/React 项目标配常用1、数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据 2、异步交互在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等。三、如何在Vue项目中使用Axios?1、安装Axiosnpm install axios2、引入Axios在main.js中全局引入Axios使全局所有组件都能使用import { createApp } from vue import App from ./App.vue import axios from axios // 配置基础后端地址 axios.defaults.baseURL http://localhost:8080 // 超时时间 axios.defaults.timeout 10000 // 挂载到全局 const app createApp(App) app.config.globalProperties.$axios axios app.mount(#app)3、基础使用1GET请求获取数据import axios from axios axios.get(/api/list) .then(res { console.log(res.data) // 后端返回的数据 }) .catch(err { console.log(请求失败, err) })带参数写法axios.get(/api/list, { params: { page: 1, limit: 10 } })2POST请求提交数据登录/注册axios.post(/api/login, { username: admin, password: 123456 }) .then(res { console.log(res.data) })(3)PUT/DELETE修改删除// 修改 axios.put(/api/user/1, { name: 张三 }) // 删除 axios.delete(/api/user/1)4、拦截器请求拦截在每次请求发出之前自动在请求头里加上一个字段叫 Authorization。而“token”是你登录后存在本地的“临时身份证”后端需要根据这个识别你的身份。而不需要我们手动添加。axios.interceptors.request.use(config { // 请求头加token config.headers.Authorization localStorage.getItem(token) return config })响应拦截统一处理报错、状态码axios.interceptors.response.use( res res.data, // 直接返回数据不用每次都写res.data err { alert(请求出错) return Promise.reject(err) } )5、async/await是什么async/await是让异步代码比如 axios 请求写得像同步代码一样的语法专门用来简化 axios 请求不用像之前一样写then,然后回调嵌套。对比// 传统写法用 then 链式调用 axios.get(/api/list).then(res { console.log(res) })//async/await 写法 async function getList() { // 像普通变量一样直接接收结果 let res await axios.get(/api/list) console.log(res) }async写在函数前面告诉JS这个函数里有异步操作await只能用在有async的函数里等待异步操作执行完之后再往下走四、总结Ajax是原生异步请求原理Axios是封装好的 HTTP 请求库简化 Ajax 开发日常开发发接口、传参、带 token、统一拦截、处理请求报错全靠 AxiosVue 前端必备。