vue的axios请求，对它进行封装使用

在开发写项目时，直接在所需组件见直接引用axios并不是一个好的方法，如果vue不再支持axios在以后修改起来很麻烦，所以我们对请求数据的方式进行一次封装，以便后期好修改，代码如下

1.创建axios.js文件，对axios进行封装。

import myAxios from 'axios' export default function axios(option) { return new Promise((resolve, reject) => { // 1.创建axios的实例
		const instance = myAxios.create({ baseURL: 'http://123.207.32.32:8000',
			timeout: 5000 }); // 配置请求和响应拦截
		instance.interceptors.request.use(config => { // console.log('来到了request拦截success中'); return config }, err => { // console.log('来到了request拦截failure中'); return err }) instance.interceptors.response.use(response => { // console.log('来到了response拦截success中'); return response.data }, err => { console.log('来到了response拦截failure中'); console.log(err); if (err && err.response) { switch (err.response.status) { case 400:
							err.message = '请求错误' break case 401:
							err.message = '未授权的访问' break } } return err }) // 2.传入对象进行网络请求
		instance(option).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } 

2.创建home.js文件，导入对axios，在对请求做一层封装。

import axios from './axios' export function getCategory() { return axios({ method: 'get',
    url: '/category' }) } export function getCategoryDetail(miniWallkey, type) { return axios({ method: 'get',
    url: '/subcategory/detail',
    params: { miniWallkey, type } }) } 

3.在对应的组件中发送真正的网络请求。

import { getCategory, getCategoryDetail } from './home.js' export default { methods: { getlist() { getCategory(option).then(res => {}) //option为传入的参数 } } } 

本文地址：https://blog.csdn.net/weixin_45932733/article/details/109029316