vue的axios请求,对它进行封装使用
程序员文章站
2022-06-28 16:59:00
在写项目时,从长远考虑,直接在所需组件见直接引用axios并不是一个好的方法,如果vue不再支持axios在以后修改起来很麻烦,所以我们对请求数据的方式进行一次封装,以便后期好修改,代码如下1.创建axios.js文件,对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
上一篇: Java课设--学生成绩管理系统一
下一篇: Spring5的数据访问与集成