vue进行axios封装请求,如何调用axios
程序员文章站
2022-04-10 19:32:50
import axios from 'axios'import { getToken } from '@/utils/auth'// 创建axios实例const request= axios.create({ baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url timeout: 12000 // 请求超时时间})// request...
vue进行axios封装
import axios from 'axios' import { getToken } from '@/utils/auth' // 创建axios实例 const request= axios.create({ baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url timeout: 12000 // 请求超时时间 }) // request请求拦截器 request.interceptors.request.use( config => { if (getToken()) { config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 } config.headers['Content-Type'] = 'application/json' return config }, error => { // Do something with request error // for debug Promise.reject(error) } ) // response 响应拦截器 request.interceptors.response.use( response => { return response.data }, error => { let code = 0 try { code = error.response.data.status } catch (e) { if (error.toString().indexOf('Error: timeout') !== -1) { Notification.error({ title: '网络请求超时', duration: 5000 }) return Promise.reject(error) } } if (code) { if (code === 401) { MessageBox.confirm( '登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' } ).then(() => { // 根据实际业务需求写代码 }) } } else { Notification.error({ title: '接口请求失败', duration: 5000 }) } return Promise.reject(error) } ) export default request调用axios
import request from '@/utils/request' //引入封装的axios //post请求 export function login(data) { return request({ url: 'auth/login', method: 'post', data }) } //get请求 export function getInfo() { return request({ url: 'auth/info', method: 'get' }) }本文地址:https://blog.csdn.net/weixin_45418329/article/details/107311323