尚品汇商城项目 关于AXIOS二次封装

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的优点

1. Ajax可以与服务器进行异步的数据交换，在不刷新整个页面的情况下更新部分页面内容。
2. Ajax异步加载数据可以提高页面的加载速度，提升用户体验。
3. .Ajax支持XML、JSON等多种数据格式

1.2Ajax的缺点

1. 不利于SEO搜索
2. 由于浏览器同源策略的限制，Ajax通常不支持跨域
3. 有可能会遭遇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. 如果项目很小： 接口只有1.2个，在组件的生命周期函数中发请求（mounted）
2. 如果项目大，组件多： 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;