vuecli中对axios的使用及封装

1、首先第一步npm i axios下载（这里要注意：如果你当前的项目vue版本是2，安装axios的时候需要指定一下版本axios@3，默认最新版本）

2、在src目录下创建api文件

3、在api文件下创建request.js（用于对axios的二次封装）

内容如下:

//引入axios，进行二次封装
import axios from 'axios'
//引入进度条
import nprogress from 'nprogress'
//start:进度条开始 done：进度条结束
//引入进度条的样式
import "nprogress/nprogress.css"

const requests = axios.create({
    // 配置对象
    //基础路径，发送请求的时候，路径当中会出现api
    baseURL: '/api',
    //代表请求超时的时间5秒
    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 error;
        }
    );
export default requests

4、在api文件下创建index.js（用于统一管理api）

内容如下:

//引入封装好的axios
import requests from "./request";
//所有请求的接口
//三级联动接口：api/product/getBaseCategoryList get 无参数
//发请求：axios发请求返回数据结果为Promise对象

//分类api
export const reqCategoryList =()=> requests({url:'/product/getBaseCategoryList',method:'get'});

5、在页面中进行使用 

<template>

</template>

<script>
    //引入分类api
    import {reqCategoryList} from '../../../api'
    export default {
        name: "index",
        data() {
            return {
                typeNavList: []
            }
        },
        //在接受Promise类型的对象时，需要搭配（async，await）获取成功的动态
        async mounted() {
            let res = await reqCategoryList();
            this.typeNavList = res.data;
            //	调用vuex中的方法获取数据
            // this.$store.dispatch('home/actionsTypeNavList');
        }
    }
</script>

<style>
	
</style>

这里会涉及到跨域问题 （这里使用代理服务器解决）

在项目目录下vue.config.js文件中编写以下代码（vue2）

module.exports={
    //关闭语法检查
    lintOnSave:false,
    devServer: {
        proxy: {
            //可以定义多个域名的请求
            //这里是指所有带有api的请求都会使用以下代理
            '/api': {
                //http://39.98.123.211服务器的地址
                target: 'http://39.98.123.211',
                changeOrigin: true, //是否跨域
                pathRewrite: {  //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
                    "^/api": ""
                }
            },
        }
    }
}

在项目目录下vue.config.js文件中编写以下代码（vue3）

  server: { //同plugins同级
    port: 3000, //本地端口号
    proxy: { //配置代理服务器
      "/api": {
        target: "http://api.test.uat",    //目标url
        changeOrigin: true,    //允许跨域
        rewrite: (path) => path.replace(/^\/api/, ""),     //重写路径,替换/api
      },
    }
  }