【前言】众所周知Ajax技术是前后端分离项目中不可或缺的一门技术，后端开发人员通过提供接口地址，前端开发人员通过Ajax技术调用后端的接口实现。简而言之后端为前端提供数据，前端利用Ajax技术将后端的提供的数据渲染展示在页面中。当然学习一门技术最好的教程是Axios官网。
什么Ajax?
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。包括HTML,XHTML,CSS,JavaScript,DOM,XML,XSLT以及最重要的XMLHttpRequest,它是⼀种⽤于创建快速动态⽹⻚的技术是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。通过在后台与服务器进⾏少量数据交换，Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下，对⽹⻚的某部分进⾏更新。
Ajax和Axios的关系
Ajax和Axios在本质上并没有太大的区别，在写法上大致相同，其实Axios是通过promise实现对Ajax的一种封装，和通过jQuery封装Ajax一样，也就是说jQuery将请求技术封装成了Ajax,而通过promise又把Ajax封装变成了Axios。
总结一句话就是Axios属于Ajax,而Ajax不止Axios。
Ajax和Axios的选择
在一个项目中到底该使用Ajax技术还是Axios技术，在现在的前端mvvm模式下，选择Axios更适用于发送请求。它主要有以下优点：
- 支持Promise API；
- 拦截请求和响应；
- 转换请求数据和响应数据；
- 取消请求；
- 自动转换json数据；
- 客户端支持防御XSRF攻击
如何封装一个Axios请求
以Vue项目为例
- 在项目
src目录下新建目录utils,新建request.js文件
// 1.导入axios实例
import axios from 'axios'
// baseURL 超时时间配置，axios.create创建新的axios实例
const request = axios.create({
// 后台请求基地址
baseURL: ''
})
// 2.添加拦截器
// 请求拦截器-之前
request.interceptors.request.use(config => {
// 场景：全局注入token
return config
}, e => Promise.reject(e))
// 处理返回数据 token失效跳回到登录页
// 响应拦截器-之后
request.interceptors.response.use(
(response) => {
// 请求成功（2XX）
return response
},
// 请求失败（5XX）
(error) => {
// 场景：token失效状态码401跳回登录页
return Promise.reject(error)
}
)
//************请求二次封装（可选）****************
/**
* @param url 请求路径
* @param method 请求方式
* @param data 请求参数
*/
const myRequest = (url, method, data) => {
return request({
url,
method,
[method === 'get' ? 'params' : 'data']: data
})
}
// 3.导出request实例
export default myRequest
- 页面中使用封装的请求方法，传递参数
- 页面导入封装的
request方法
import request from '@/utils/request'
- 在页面中调用封装的请求方法
export default{
setup () {
// 定义一个发请求的方法
const getBanners = async () => {
const res = await request('路径', '请求方式','请求参数')
console.log('请求数据：', res)
}
//生命周期钩子函数
onMounted(() => {
//调用请求的方法
getBanners()
})
}
}
以上实现了项目中对Axios请求的简单封装，希望对大家有所帮助。
