vue中axios得封装及使用

Posted 2021-02-18 孟~先~生

现在目录中得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) })