现在目录中得src文件中自定义一个文件在里面建立一个request.js文件
这个里面写得请求拦截和响应拦截
代码如下:::
/* eslint-disable prefer-promise-reject-errors */
// eslint-disable-next-line no-unused-vars
import axios from ‘axios‘
// 创建一个axios实例
const service = axios.create({
baseURL: ‘https://api.it120.cc/wenjie‘,
timeout: 2500
})
// 请求拦截
service.interceptors.request.use(config => {
console.log(‘请求被拦截‘)
return config
}, _error => {
return Promise.reject(‘请求出错‘)
})
// 响应拦截
service.interceptors.response.use(res => {
console.log(‘响应拦截‘)
return res
}, _error => {
return Promise.reject(‘出错了‘)
})
export default service
然后在main.js中引入在绑定在vue得实例上,
import http from ‘./http/rewuest‘
Vue.config.productionTip = false
// 挂载到原型上
Vue.prototype.$http = http
然后就能在文件中使用axios请求来得数据了
代码如下:::
this.$http.post(‘/shop/goods/list‘).then(res => { console.log(res) })
还可以将接口进行封装。
在建立一个api文件,每次将接口写在api里面进行调用就可以了
import request from ‘./rewuest‘ export function cluss () { return request({ url: ‘/shop/goods/list‘, method: ‘post‘ }) }
然后在文件直接引用就可以了
import { cluss } from ‘../http/api‘ cluss().then(res => { console.log(res) })