Ajax技术和Axois工具库
前端如何才能动态展示数据？如何动态获取后端的数据呢？
目录
文章目录
一、什么是Ajax?
二、什么是Axios?
核心用途
三、如何在Vue项目中使用Axios?
1、安装Axios
2、引入Axios
3、基础使用
4、拦截器
5、async/await是什么？
总结
一、什么是Ajax?
Ajax是一种技术概念。全称：异步的JavaScript和XML
- 是浏览器原生的通信方式
- 不用刷新页面，就能和服务器异步请求数据
- 原生用XMLHttpRequest实现
二、什么是Axios?
Axios 是一个第三方库，是封装好的、更好用的 Ajax 工具库，用于快速开发。
专门给 Vue/React 等项目用，语法更简洁、支持拦截器、超时设置、自动转换 JSON。
核心用途
1、前端向后端发网络请求（GET/POST/PUT/DELETE）
2、异步获取后台数据，页面不用刷新
3、统一请求 / 响应拦截（加 token、统一报错、加载动画）
4、自动转换 JSON，不用手动解析
5、支持请求超时、取消请求、并发请求
6、浏览器和 Node.js 都能用，Vue/React 项目标配
常用：
1、数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据 ；
2、异步交互：在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
三、如何在Vue项目中使用Axios?
1、安装Axios
npm 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、基础使用
（1）GET请求（获取数据）
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 } })（2）POST请求（提交数据，登录/注册）
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、统一拦截、处理请求报错全靠 Axios，Vue 前端必备。