Ajax与Axios：现代前端异步请求指南

文章目录

一、ajax简介
- [1.1 XMLHttpRequest 概述](#1.1 XMLHttpRequest 概述)
- [1.2 Promise](#1.2 Promise)
- [1.3 封装简易axios](#1.3 封装简易axios)
二、axios简介
- [2.1 axios使用](#2.1 axios使用)
- [2.2 async与await](#2.2 async与await)
- [2.3 axios 封装方法](#2.3 axios 封装方法)

一、ajax简介

Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它通过异步通信提升用户体验，减少带宽消耗。

核心特点

异步通信 ：浏览器在后台发送请求，用户仍可正常操作页面。
局部更新 ：仅刷新页面中需要变化的部分，而非整个页面。
数据格式灵活：支持 XML、JSON、HTML 或纯文本等格式。

工作原理

创建 XMLHttpRequest 对象 ：通过 JavaScript 发起 HTTP 请求。
配置请求 ：指定请求方法（GET/POST）、URL 和异步标志。
发送请求 ：调用 send() 方法，可附带请求数据。
处理响应：通过回调函数监听 onreadystatechange 事件，解析返回的数据。

常用请求方法

对服务器资源，要执行的操作，如果没有写请求方法，则默认为get请求

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据(全部)
DELETE	删除数据
PATCH	修改数据(部分)

1.1 XMLHttpRequest 概述

XMLHttpRequest（XHR）是一种浏览器提供的 API，用于在客户端和服务器之间发送 HTTP 或 HTTPS 请求，支持异步通信。它是 AJAX（Asynchronous JavaScript and XML）技术的核心组件，允许网页在不重新加载的情况下更新部分内容

核心功能

异步请求 ：可在后台发送请求，不阻塞用户界面。
支持多种协议 ：HTTP、HTTPS、FTP 等。
数据格式灵活：可传输 XML、JSON、HTML 或纯文本。

get请求

url?参数1=值1&参数2=值2可以使用URLSearchParams函数实现拼接

html 复制代码

<script>
    const xhr = new XMLHttpRequest()
    xhr.open('请求方法GET', '请求url')  // 如果有参数 则为   url?参数1=值1&参数2=值2
    
    // url也可通过下面方法拼接
    // const params = new URLSearchParams({'参数1': '值1', '参数2': '值2'})
    // const queryString = paramsObj.toString()
    // console.log(queryString)  // 参数1=值1&参数2=值2
    
    xhr.addEventListener('loadend', () => {
        // 响应结果
        connsole.log(JSON.parse(xhr.response))
    })
    // 发送请求
    xhr.send()
</script>

POST 请求

html 复制代码

<script>
    const xhr = new XMLHttpRequest()
    xhr.open('请求方法POST', '请求url')  // 如果有参数 则为   url?参数1=值1&参数2=值2
    xhr.addEventListener('loadend', () => {
        // 响应结果
        connsole.log(JSON.parse(xhr.response))
    })

    // 告诉服务器，我传递的内容类型，是JSON字符串
    xhr.setRequestHeader('Content-Type', 'application/json')
    // 发送请求   传递参数
    xhr.send(JSON.stringify({'xxx': 'xxx'}))
</script>

1.2 Promise

Promise 是 JavaScript 中用于处理异步操作的对象，代表一个尚未完成但未来会完成的操作。它提供了一种更优雅的方式处理异步代码，避免了传统的回调地狱（Callback Hell）。promise有三种状态
pending ：初始状态，表示操作尚未完成。
fulfilled ：表示操作成功完成，此时会触发 then 方法中的回调
rejected：表示操作失败，此时会触发 catch 方法中的回调

html 复制代码

<script>
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', '请求url')  // 如果有参数 则为   url?参数1=值1&参数2=值2
        xhr.addEventListener('loadend', () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.response))
            } else {
                reject(new Error(xhr.response))
            }
        })
        xhr.send()
    })

    p.then(result => {
        // 成功调用
        console.log(result)
    }).catch(error => {
        // 失败调用
        console.log(error)
    })
</script>

并行执行优化()

Promise.all：多个独立的异步操作可用Promise.all并行执行，避免不必要的串行等待。

javascript 复制代码

const Promise1 = axios({url: 'xxx', params: {"xxx": "xxx"})
const Promise2 = axios({url: 'xxx', params: {"xxx": "xxx"})

const p = Promise.all([Promise1, Promise2])
p.then(result => {
	//result结果:[Promise对象成功结果，Promise对象成功结果，...]
}).catch(error => {
	//第一个失败的Promise对象，抛出的异常
})

1.3 封装简易axios

axios 内部采用XMLHttpRequest与服务器交互

html 复制代码

<script>
    function myAxios(config) {
        return new Promise((resolve, reject) => {
            // XHR 请求
            // 调用 成功/失败 处理程序

            const xhr = new XMLHttpRequest()
            xhr.open('GET', '请求url')  // 如果有参数 则为   url?参数1=值1&参数2=值2
            xhr.addEventListener('loadend', () => {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(JSON.parse(xhr.response))
                } else {
                    reject(new Error(xhr.response))
                }
            })

            xhr.send()  // 如果有数据，从这传入  xhr.send(JSON.stringify({'xxx': 'xxx'}))
        })
    }
    
    myAxios({
        url: "xxx"
    }).then(result => {
        // 成功调用
        console.log(result)
    }).catch(error => {
        // 失败调用
        console.log(error)
    })
</script>

现代替代方案

Fetch API：基于 Promise 的简洁语法，替代传统 XHR

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Axios ：第三方库，支持拦截请求、自动转换 JSON 数据

引入axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

javascript 复制代码

axios({
    url: "xxx"
}).then((result) => {

})

二、axios简介

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它支持异步请求，提供简洁的 API 和丰富的功能，如请求/响应拦截、自动转换 JSON 数据、取消请求等。axios 内部采用XMLHttpRequest与服务器交互

核心特性

浏览器与 Node.js 兼容 ：在浏览器中使用 XMLHttpRequest，在 Node.js 中使用 http 模块。
Promise API ：支持 Promise 链式调用，避免回调地狱。
请求/响应拦截 ：可在请求发送前或响应返回后添加统一处理逻辑。
自动 JSON 转换 ：自动将请求/响应数据转换为 JSON 格式。
取消请求：通过 CancelToken 或 AbortController 中止请求

安装方法

bash 复制代码

npm install axios
# 或
yarn add axios

请求模板与参数介绍

html 复制代码

<!-- 下载  或  引入 axios库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 导入方式
    // import axios from 'axios'
    // const axios = require('axios')
		
    // 使用axios函数
    axios({
        url: 'xxx',   // 请求URL网址
        method: "请求方法",  // 请求方法，可以省略(省略默认GET  不区分大小写)   如：GET / POST 等
        params: {   // 查询参数   可以省略
            "xxx": "xxx"
        },
        data: {  // 提交数据   可以省略
            "xxx": "xxx"
        }
    }).then(result => {  // 请求成功  返回的数据
        console.log(result)
    }).catrch(error => {  // 请求失败  异常处理
        console.log(error)
    })
</script>

2.1 axios使用

get请求参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2，请求后面的参数不要写到 url 中，写在 params 中即可

html 复制代码

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 导入方式
    // import axios from 'axios'
    // const axios = require('axios')
    
    // 使用axios函数
    axios({
        url: 'xxx',
        params: {
            "参数名1": "值1",
            "参数名2": "值2"
        }
    }).then(result => {
        // 返回的数据
        console.log(result)
    })
</script>

图片上传

图片、文件上传的参数需要用到FormData()函数

html 复制代码

<body>
    <input type="file" class="upload">

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('.upload').addEventListener('change', e => {
            const params = new FormData()
            // 不是文件路径  是文件对象
            params.append('img', e.target.files[0])
            
            // 使用axios函数
            axios({
                url: 'xxx',   // 请求URL网址
                method: "POST",  // 请求方法，可以省略(省略默认GET  不区分大小写)   如：GET / POST 等
                data: params  // 提交数据   可以省略
            }).then(result => {  // 请求成功  返回的数据
                console.log(result)
            }).catrch(error => {  // 请求失败  异常处理
                console.log(error)
            })
        })
    </script>
</body>

2.2 async与await

async函数和await

async和await是JavaScript中用于简化异步操作的语法糖，基于Promise实现。async用于声明一个函数为异步函数，await用于等待Promise的解决（resolve）或拒绝（reject），使异步代码的写法更接近同步风格

async函数的特点

声明async函数时，函数前需加async关键字。async函数默认返回一个Promise对象，若函数内返回非Promise值，会自动包装为Promise.resolve(value)。若抛出错误，则返回Promise.reject(error)

javascript 复制代码

async function fetchData() {
  return "data"; // 等价于 Promise.resolve("data")
}

await的使用规则

await 只能在 async 函数内部使用，用于暂停函数执行，等待 Promise 完成（resolve 或 reject）。

若等待的 Promise 被 resolve，await 返回 resolve 的值；若被 reject，会抛出异常（可通过 try/catch 捕获）

javascript 复制代码

async function getUser() {
  try {
    const response = await axios({url: 'xxx', params: {"xx": "xx"}});
    return data;
  } catch (error) {
    console.error("请求失败:", error);
  }
}

错误处理机制

通过try-catch捕获await表达式的错误，或通过链式调用.catch()处理Promise拒绝的情况

javascript 复制代码

async function loadResource() {
  const result = await axios({url: 'xxx', params: {"xx": "xx"}}).catch(err => {
    console.error("加载失败:", err);
    return fallbackData;
  });
  console.log(result);
}

注意事项

await会阻塞当前async函数内的后续代码，但不影响外部代码执行。

过度使用await可能导致性能问题，应合理规划异步操作的串行/并行。

async函数中的循环需谨慎处理，可能需要结合for...of或Promise.all

2.3 axios 封装方法

axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。封装 axios 可以提高代码复用性、统一处理请求和响应、简化调用逻辑。

token权限控制

在utils/auth.js中判断无token令牌字符串，则强制跳转到登录页(手动修改地址栏测试)

在登录成功后，保存token令牌字符串到本地，再跳转到首页(手动修改地址栏测试)

javascript 复制代码

// 登入后保存token
localStorage.setItem("token", "xxx")

javascript 复制代码

// 没有 token 令牌字符串，则强制跳转登录页
const token = localstorage.getItem('token')
if (!token) {
	location.href = '../login/index.html'
}

javascript 复制代码

// token通过header传递
axios({
	url: 'xxx',
	headers: {
		Authorization: `Bearer ${localStorage.getItem('token')}`
	}
})

axios请求拦截器

发起请求之前，触发的配置函数，对请求参数进行额外配置

请求前会先进入到下面这段

javascript 复制代码

axios.interceptors.request.use(function (config) {
	const token = location.getItem('token')
	token && (config.headers.Authorization = `Bearer ${token}`)
	// 在发送请求之前做些什么
	return config
}, function (error) {
	//对请求错误做些什么
	return Promise.reject(error)
})

axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应结果统一处理

javascript 复制代码

axios.interceptors.response.use(function (response) {
	// 返回的 response 为 axios 请求 then 中的信息
	return response
}, function (error) {
	//对请求错误做些什么
	if (errror?.response?.status === 401) {
		alert('登录状态过期')
		location.href = 'xxx'
	}
	return Promise.reject(error)
})