vue axios 配置流程，调用全局加载的进度条，proxy前端处理跨域问题

1.axios安装

npm i axios

2.安装完成后，创建api文件夹，编辑index.js配置文件

在这里对请求和响应进行了二次封装，并且在请求与响应的阶段执行了一个全局的进度条效果的配置
这里引用用的进度条版本如下 “nprogress”: “^0.2.0”,

// 对于axios进行二次封装    npm 安装axios的方式：cnpm i --save axios
import axios from "axios";

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条的样式
import 'nprogress/nprogress.css'

// 利用axios对象的方法create，去创建一个axios实例
const requests = axios.create({
    // 配置对象
    baseURL: '/api', //这里的baseURL是基础路径 给请求都带上
    timeout: 10000,
})

// 请求拦截器
// 发送请求之前的时候进行一些操作
requests.interceptors.request.use((config) => {
    // config 配置对象  对象里面一个重要的属性：header请求头
    nprogress.start() //进度条效果
    return config
})

// 响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的响应数据  服务器的相关的数据返回来之后，响应拦截器能够检测到，可以做一些事
    // return res.data;
    nprogress.done() //进度条的效果结束
    return res.data;
}, (error) => {
    // 响应失败的时候的回调函数
    return Promise.reject(new Error(error))
})



// 对外部暴露
export default requests

3.封装请求接口 例：在api文件夹下创建 home页面会用到的封装接口

// 在这里配置好的页面就能够通过  import {getListThree} from '@/api/index'  的方式，直接在页面中获取  

//想要使用的话  直接如下使用.then的方式就可以
//getListThree()
//   .then((res) => {
//     console.log(res)
//   })
//.catch();

import requests from "./request";

//获取页面中的三级联动的数据列表
export const getListThree = () => {
    // 发送请求  返回结果是promise对象
   return requests({
        url: '/product/getBaseCategoryList',
        method:'get'
    })
}

4.使用proxy处理可能会遇到的跨域问题 在vue.config.js中配置跨域代理：

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,




  // 协议，域名，端口号不同，都会导致跨域   webpack的工作方式说明
  // 代理跨域  发现的所有的api  第三方进行工作
  devServer: {
    proxy: {
      // 检测到请求中出现了/api的路径的时候，第三方的服务器会执行操作。执行一次转发
      // 服务器与服务器之间是没有跨域问题的，浏览器才会存在跨域问题
      '/api': {
        target: 'http://gmall-h5-api.atguigu.cn',  //数据来自哪里就在这里写上
        // pathRewrite: {   
        //   '^/api': ''
        // },
      },
    },
  },
})

5. 使用router仓库调用