Vue项目实战(二)：关于请求接口相关问题分析

1. 前端向服务器发送请求的常用方式：
1.1. XMLHttpRequest、fetch、JQ、axios

2. 为什么要进行二次封装axios？
2.1. 主要目的是：请求拦截器、响应拦截器
------ 请求拦截器：可以在发送请求之前处理一些业务
------ 响应拦截器：当服务器数据返回以后，可以处理一些业务

3. 在项目当中经常会出现api文件夹(存放axios)

//src >>> api >>> request.js
//对于axios进行二次封装
import axios from 'axios';

//第一步:利用axios的对象的方法create,创建一个axios实例。注意：这里的requests就是axios,只不过需要稍微配置下
const requests = axios.create({
    //配置对象
    baseURL: '/api', //基础路径，发请求的时候，路径当中会出现api,不用再写'http://localhost:8080/api'
    timeout: 5000, //代表请求超时的时间为5s
})

//第二步:请求拦截器：在发请求之前,请求拦截器可以检测到，可以在请求发出去之前处理一些业务
requests.interceptors.request.use((config)=>{ 
    //config:是一个配置对象，对象里有一个header请求头属性，很重要！！！
    return config;
})

//第三步:响应拦截器：当服务器数据返回以后，可以处理一些业务
requests.interceptors.response.use((res)=>{
    //服务器响应成功的回调函数：服务器响应数据之后，响应拦截器可以检测到，可以在服务器响应数据之后处理一些业务
    return res.data;
},(error)=>{
    //服务器响应失败的回调函数：可以打印一些错误信息，或者终止promiss量
    return Promise.reject(new error('数据响应失败！'))

})

//对外暴露
export default requests;

4. 接口统一管理
4.1. 项目小的时候：完全可以在组件的生命周期函数中发请求
4.2. 项目大的时候：则需要统一管理接口

5. 跨域问题
5.1. 什么是跨域？
5.1-1. 协议、域名、端口号不同请求，称之为跨域

http://localhost:8080/#/home  //前端项目本地服务器
http://gmall-h5-api.atguigu.cn  //后台服务器

5.2. 怎么解决跨域？
5.2-1. JSONP、CROS、代理服务器

//代理服务器解决跨域：vue.config.js == webpack.config.js 配置文件
module.exports = {
    //关闭eslint
    lintOnSave: false,
    //代理跨域
    devServer: {
        proxy: {
            '/api': {
                target: 'http://gmall-h5-api.atguigu.cn', //后台服务器接口
                // pathRewrite: { '^/api': '' } //重写路径
            }
        }
    }
}

6. nprogress进度条的使用

// src >>> api >>> request.js

//引入进度条
import nprogress from 'nprogress';
// console.log(nprogress) 打印出来其中start方法：进度条开始，done方法：进度条结束
//引入进度条样式:需要修改颜色时，需要修改这个样式
import 'nprogress/nprogress.css';

//在发请求之前,请求拦截器可以检测到，可以在请求发出去之前处理一些业务
requests.interceptors.request.use((config)=>{ 
    //config:是一个配置对象，对象里有一个header请求头属性，很重要！！！

    //请求被检测到的时候，进度条开始
    nprogress.start();

    return config;
})

//响应拦截器：当服务器数据返回以后，可以处理一些业务
requests.interceptors.response.use((res)=>{
    //服务器响应成功的回调函数：服务器响应数据之后，响应拦截器可以检测到，可以在服务器响应数据之后处理一些业务

    //响应数据请求成功后被检测到，进度条结束
    nprogress.done();

    return res.data;
},(error)=>{
    //服务器响应失败的回调函数：可以打印一些错误信息，或者终止promiss量
    return Promise.reject(new error('数据响应失败！'))
})