axios的二次封装

• 创建vue项目
• 安装axios

npm i axios -S

• 安装进度条插件

npm i nprogress -S

• 在src目录下创建一个名为api的目录，在api目录下创建一个request.js脚本。并设置进度条

  //对axios进行二次封装
  import axios from 'axios'
  //引入进度条
  import nprogress from 'nprogress'
  //引入进度条样式
  import 'nprogress/nprogress.css'
  //start:进度条开始 done:进度条结束
  // console.log(nprogress);
  
  // 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) => {
      // 响应失败的回调函数
      return Promise.reject(new Error('请求失败了'))
  })
  
  // 对外暴露
  export default requests

  api接口的统一管理

为什么api接口的需要统一管理？

• 小项目：如果api接口只有一两个，完全可以在组件的生命周期created或者mounted里面发起axios请求。
• 大项目：组件成百上千，层层依赖，单单接口就有几十个，而再利用生命周期发起请求就有点捉襟见肘了，为了方便后期的管理和维护，所以需要进行api接口的统一管理。

操作 

• 在api目录下创建一个index.js脚本。

  //当前模块对api接口进行统一管理
  import requests from './request'
  
  //例如，需要调用以下接口
  // /api/product / getBaseCategoryList   get请求  无参数
  // 发请求:axios发请求返回的是Promise对象
  export const reqCategoryList = () => {
      //发请求
      return requests({ url: '/product/getBaseCategoryList', methods: 'get' })
  }

  此时，页面会报错，涉及到跨域问题

跨域问题 

• 当协议、域名、端口号不同时，发起请求，称之为跨域

例如：

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

•  解决办法：JSONP、CROS、代理服务器

使用代理服务器解决，找到vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    //关闭eslint
    lintOnSave: false,
    // 代理跨域
    devServer: {
        proxy: {
            "/api": {
                target: "http://gmall-h5-api.atguigu.cn",//target:需要指向服务器的IP，而不是本地
                pathRewrite: { '^/api': '' }, //路径重新可以不需要，接口本身带/api
                
            }
        }
    }
})

注意 ：配置了vue.config.js需要重启服务 

npm run serve