尚品汇前台学习笔记(二)

你可以通過右下角的簡按鈕切換為簡體顯示

请求接口统一封装

项目小:可以在组件的生命周期函数中发请求
项目大: API进行统一管理
创建index.js文件，用于封装所有请求
将每个请求封装为一个函数，并暴露出去，组件只需要调用相应函数即可，这样当我们的接口比较多时，如果需要修改只需要修改该文件即可。

// 当前这个模块:API进行统一管理

import requests from '@/request';

// 三级联动接口
// /api/product/getBaseCategoryList get 无参数
// export const reqCategoryList = () => {
//     // 发请求 返回结果promise对象
//     return requests({ url: '/product/getBaseCategoryList', method: 'get' });
// }
export const reqCategoryList = () => requests({ url: '/product/getBaseCategoryList', method: 'get' });

组件想要使用相关请求时，只需要导入相关函数即可，以上图的reqCateGoryList 为例:

import {reqCateGoryList} from '@/api'
//发起请求
reqCateGoryList();

nprogress进度条插件(放在请求和响应拦截器中）

cnpm install --ssave nprogress
start() 进度条开始 
done()  进度条结束

import axios from "axios";
// 引入进度条
import nprogress from 'nprogress';
// 引入进度条样式
import "nprogress/nprogress.css";
// console.log(nprogress);
// start:进度条开始 done 进度条结束

// 1:利用axios对象的方法create,去创建一个axios实例
// 2:request就是axios
const request = axios.create({
    // 配置对象
    // 基础路径,发请求的时候,路径出现api
    baseURL: "/api",
    // 代表请求超时的时间5S
    timeout: 5000,
});
// 请求拦截器:在发请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情
request.interceptors.request.use((config) => {
        // config:配置对象，对象里卖弄有一个属性很重要,header请求头
        // 进度条开始动
        nprogress.start();
        return config;
    })
    // 响应拦截器
request.interceptors.response.use((res) => {
    // 成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情
    // 进度条结束
    nprogress.done();
    return res.data;
}, (error) => {
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
})

// 对外暴露
export default request;