vue中二次封装axios并统一处理loading

关于vue中统一处理axios
每次在开发项目的时候都是需要统一处理请求的，我的项目中使用的是 axios
先在项目中引入 axios

npm： npm install axios
bower：bower install axios
yarn：yarn add axios

首页在我们项目的 utils 文件下创建一个 request 文件夹，然后在 request 文件下创建两个文件 index.js 跟 request.js

在 request.js 文件中

// request.js
import axios from 'axios' // 引入已经安装好的 axios
import { Toast } from 'vant' // 这里是引入的 vant 中的loading http://vant-contrib.gitee.io/vant/#/zh-CN

// 初次加载loading
const getLoading = () => {
  Toast.loading({
    forbidClick: true,
    message: '加载中...',
    duration: 0
  })
}

// 去除loading
const removeLoading = () => {
  Toast.clear()
}

// loadingNum 监听请求次数当并调用 getLoading 方法
let loadingNum = 0
const severaLmergeLoading = () => {
  if (loadingNum === 0) {
    getLoading()
  }
  loadingNum += 1
}

// 当所有请求结束后，去除整个loading
const endLoading = () => {
  loadingNum--
  if (loadingNum <= 0) {
    loadingNum = 0
    removeLoading()
  }
}

// 创建 axios 实列
const service = axios.create({
	baseURL: 'xxxx', // 地址
	// `timeout` 指定请求超时的毫秒数。
  	// 如果请求时间超过 `timeout` 的值，则请求会被中断
  	timeout: 5000, // 默认值是 `0` (永不超时)
})

// 请求拦截器
service.interceptors.request.use(
	config => {
		// 是否需要 loading
		if (config.hideloading) {
	      severaLmergeLoading()
	    }
		config.headers = {
			// 自定义的一些操作，比如传 token 或者 Content-Type
		}
		return config
	},
	err => {
		// 错误抛出
		endLoading()
		return Promise.reject(err)
	}
)

// 响应拦截器
service.interceptors.response.use(
	response => {
		endLoading()
		// 根据返回的做统一处理
		const res = response.data
		// 这里的 code 根据实际项目中的需求来，以下只是示列
		// 错误
		if(res.code === 0) {
			.....
			return Promise.reject(new Error('出错了'))
		}
		// 成功
		if(res.code === 1) {
			.....
			return Promise.resolve(res)
		}
	},
	err => {
		endLoading()
		// 错误抛出
		return Promise.reject(err)
	}
)

在到 utils -> request -> index.js 文件里

// index.js 文件
// 这里 get 跟 post 分了两个写可以合成一个
// 根据自己实际项目中情况添加需要的自定义参数
import request from './request'

/**
 * get 请求
 * @param {*} url api
 * @param {*} params 参数
 * @param {*} hideloading loading 动画
 * @returns 
 */
export const getAction = (url, params, hideloading = false) => {
  return request({
    url,
    method: 'get',
    params,
    hideloading
  })
}

/**
 * post 请求
 * @param {*} url api
 * @param {*} data 参数
 * @param {*} hideloading loading 动画
 * @returns 
 */
export const postAction = (url, data, hideloading = false) => {
  return request({
    url,
    method: 'post',
    data,
    hideloading
  })
}

最后在我们的根目录下创建一个 api 文件夹来同统一管理api

// api -> index.js
import { getAction, postAction } from '@/utils/request'

// 项目中的 api
export const getData = (e) => {
   return getAction('xxx/xxxx', e, true)
}

最后的最后就可以在使用的地方尽情愉快的使用啦

import { getData } from '@/api'

export default {
	  mounted() {
	    this.queryList()
	  },
	methods: {
		async queryList() {
			// const data = { ... } // 自定义参数
			// getData().then(res => {
			//		console.log(res)
			// })
			
			// try {
        	// const res = await getData(data)
        	//	 console.log(res)
		    // } catch (error) {
		    	// 异常处理
        		// console.log(error)
      		// } finally {
		        // 成功失败都返回
		    // }
		}
	}
}

有问题的地方评论区讨论