一. 配置

1.下载axios

npm i axios

2.在src目录新建文件夹 创建http.js文件

二. 封装内容

• 通过axios封装可实现全局loading、配置请求头、操作提示、路由拦截等功能

// 引入axios
import axios from 'axios'
// 引入提示框(以实际项目为准)
import { Message } from "element-ui";
// 引入路由(以实际项目为准)
import router from '@/router'
//引入loading组件(以实际项目为准)
import { Loading } from 'element-ui';
// 创建的axios的实列 instance
const instance = axios.create({
    baseURL: '/api', // 基准地址  可直接配置路径,也可代理路径(以实际项目为准)
    timeout: 10000 // 超时时间
})
// 请求拦截
// 声明变量接收logding
let loadingInstance
instance.interceptors.request.use((config) => {
    // 设置请求头
    let token = localStorage.getItem('token')
    config.headers.Authorization = token
    //设置logding配置 赋值
    loadingInstance = Loading.service({
        lock: true,
        text: '拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
   // 返回请求头
    return config
}, err => {
   // 请求失败返回失败信息
    return Promise.reject(err)
})

// 响应拦截
instance.interceptors.response.use((res) => {
    // 响应成功则关闭loading加载
    loadingInstance.close();
    //返回响应数据
    return res
}, err => {
    // 响应失败则关闭loading加载  
    setTimeout(() => {
        loadingInstance.close();
    }, 1000);
    // 响应失败返回失败信息
    return Promise.reject(err)
})
导出实例
export default instance

三. 实际应用

• 在src文件夹继续创建接口文件 如api.js等 亦可依据实际开发需求分类创建文件夹

• 在页面中引入,传递对应参数,即可实现请求接口

<script>
引入接口
import { reqLogin } from "@/utils/api";
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    // async配合await将异步转为同步  且等待接口完成返回再继续执行
    async login() {
      // 使用catch反向逻辑,避免过多逻辑嵌套
      const res = await reqLogin(this.from).catch(err => {
        // 提示错误, 终止执行
        return console.error(err)
      })
      console.log(res, '请求成功');
    }
  },
  created() { },
  computed: {},
  components: {},
};
</script>