1 Axios和Ajax的关系主要体现在Axios是对Ajax技术的封装
Ajax(Asynchronous JavaScript and XML)是一种用于创建异步Web应用的技术,它通过在浏览器后台与服务器交换数据,实现了网页的局部更新。
Axios是一个基于Promise的HTTP库,不仅可以实现在浏览器中发送异步请求,还可以在Node.js中创建HTTP请求。Axios提供了比传统Ajax更丰富、更强大的功能,如支持Promise API、拦截请求和响应、转换请求和响应数据等,同时,Axios还具有更好的错误处理机制和更方便的API。
1.1Ajax的优点
- Ajax可以与服务器进行异步的数据交换,在不刷新整个页面的情况下更新部分页面内容。
- Ajax异步加载数据可以提高页面的加载速度,提升用户体验。
- .Ajax支持XML、JSON等多种数据格式
1.2Ajax的缺点
- 不利于SEO搜索
- 由于浏览器同源策略的限制,Ajax通常不支持跨域
- 有可能会遭遇XSS和CSRF攻击
1.2.1补充: XSS攻击和CSRF攻击
- XSS攻击是利用程序漏洞,在用户的浏览器中注入脚本代码进行攻击。
- CSRF攻击(跨站点请求伪造),利用用户已经登录的凭据执行恶意操作,包括更改密码,转账等
2.尚品汇中AXIOS二次封装
XMLHttpRequest(要会手写)、fetch、JQ、axios(项目常用) 都可以向服务器发送请求
2.1为什么要进行二次封装axios?
请求拦截器:在发送请求之前处理一些业务
响应拦截器:服务器数据返回以后,可以处理一些事情
2.2在项目中,经常放置API文件夹【axios】
配置对象
基础路径
接口中:路径都带有 /api
baseURL:"/api" ===> 此行代码的作用是,发送请求的时候路径 默认都带有--- /api
2.3接口统一管理
需求:向服务器发请求,获取三级联动数据进行展示?
(意思是商城导航栏中的数据是在服务中 被请求响应过来在页面中展示的,不是原本本地的静态页面的写法)
- 如果项目很小: 接口只有1.2个,在组件的生命周期函数中发请求(mounted)
- 如果项目大,组件多: axios.get('xxx')===> 接口需要统一管理
文件目录:src/api/index.js
准备好三级联动接口文档: /api/product/getBaseCategoryList
- 因为有很多个模块要用,要对外暴露 export
- 服务器与服务器之间没有跨域问题,但服务器和浏览器有,解决方案采取配置代理服务器的方法api 相当于第三者,
开启代理服务器(在vue.config.js中)的 target配置项指,获取数据的那台服务器的IP地址()
target: " http://gmall-h5-api.atguigu.cn",这是代理跨域的target
// 代理跨域
devServer: {
proxy: {
'/api': {
target: "http://gmall-h5-api.atguigu.cn"
}
}
}
2.4nprogress进度条使用
终端安装 npm i nprogress --save
package.json文件中添加 nprogress配置项
在数据返回之后,在响应拦截器中使用
nprogress是一个对象,引入--使用---还要添加进度条样式
// 引入进度条/进度条样式
import nProgress from "nprogress";
import "nprogress/nprogress.css"
// 进度条开始动
nProgress.start()
// 进度条完成
nProgress.done();
// 对于axios进行二次封装
import axios from "axios";
// 引入进度条/进度条样式
import nProgress from "nprogress";
import "nprogress/nprogress.css"
// 1. 利用axios对象的方法 create,去创建一个axios实例
// 2. requests 就是axios。只不过稍微进行配置
const requests = axios.create({
// 配置对象
// 基础路径,发请求的时候,路径当中会出现api
baseURL: 'api',
// 代表请求超时的时间 5s
timeout: 5000
})
// 请求拦截器:在发请求之前,请求拦截器可以检测到,可以在请求发送出去之前做一些事情
requests.interceptors.request.use((config) => {
// config: 配置对象,对象里面有一个属性很重要,headers请求头
// 进度条开始动
nProgress.start()
return config;
})
// 响应拦截器
requests.interceptors.response.use((res) => {
// 成功的回调函数: 服务器响应数据回来之后,响应拦截器可以监测到,可以做一些事情
nProgress.done();
return res.data
}, (error) => {
// 响应失败的回调函数,!!!终止promise链
return Promise.reject(new Error('faile'))
})
// 对外暴露 de 是axios实例, 不是axios本身
export default requests;