我要评论
在开发写项目时，直接在所需组件见直接引用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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论