vue完整的Axios封装-拦截器、状态码、接口API管理、Loading...手把手教学

前言

Axios 相信对有过Vue开发经验的码农们肯定不陌生，自从Vue2推出之后，官方及尤大佬都推荐使用axios来进行网络请求，但是你以为只是简单引入使用就完了吗，看完对Axios的二次封装别千万吓到你。

---

准备工作：编译器的选择可以加速代码的开发，这里我们推荐使用 HBuilderX

一、在vue项目中配置Axios

1.下载依赖

代码如下：

npm i axios -S
npm i qs -S // 序列化数据 可以将数据转化为 url参数形式

在这里说明一下：如果只下载axios 会导致数据传输请求的时候无法正常获取数据，需要配合qs进行数据请求，许多铁汁都会在这里踩坑，希望不要被误导。

2.main.js 全局引入

import Axios from "axios"
Vue.prototype.$axios = Axios
import  qs from 'qs'
Vue.prototype.$qs = qs

二、在vue项目中配置Axios

1.封装前与封装后的对比

封装前

axios('http://localhost:9528/data', {
   
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
   
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
   
    return data;
  }],
  // 其他请求配置...
})
.then((data) =&g