1、安装axios
npm install axios
2、引入axios
import axios from 'axios'
import Qs from 'qs'
3、定义request.js
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // request timeout
})
// 设置请求拦截器
service.interceptors.request.use(config => {
// 参数转换为表单模式
if (config.data) {
config.data = Qs.stringify(config.data)
}
// 设置请求头
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded', // 模拟form表单方式提交请求
'Access-Token': store.getters.token === undefined ? '' : store.getters.token() // 设置token
}
return config
}, error => {
console.log(error) // for debug
Promise.reject(error)
})
// 设置响应拦截器
service.interceptors.response.use(
response => response,
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
export default service
4、使用
import request from 'request'
export function fetchList(query) {
return request({
url: '/article/list',
method: 'get',
data: query
})
}
import { fetchList } from '@/api/article'
methods: {
getList() {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
}
}
