首先配置通用設(shè)置
import QS from 'qs'
import Axios from 'axios'
import {SERVER} from '@/Config/config'
// 默認(rèn)請(qǐng)求地址
Axios.defaults.baseURL = SERVER
// 超時(shí)時(shí)間
Axios.defaults.timeout = 5000
接著 配置攔截器
let load = null
// 發(fā)送
Axios.interceptors.request.use(config => {
// 配置token
if (store.getters.token) {
config.headers['x-requested-key'] = `ZXWL${getToken()}`
}
// 配置content-Type
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// elementUI的loading
load = Loading.service({ fullscreen: true })
return config
}, error => {
return Promise.reject(error)
})
// 接收
Axios.interceptors.response.use(config => {
// 關(guān)閉loading
load.close()
return config
}, error => {
return Promise.reject(error)
})
最后去配置get方法和post方法
// get方法
export const getService = (url = '', params = {}) => {
return new Promise((resolve,reject) => {
Axios.get(url,{param}).then(res => {
const {data} = res;
resolve(res);
}).catch(err => {
reject(err)
})
})
}
// post方法 這里就需要使用qs庫(kù)來(lái)序列化表單
export const postService = (url = '', param = {}) => {
return new Promise((resolve,reject) => {
Axios.post(url,QS.stringify(param)).then(res => {
const {data} = res;
resolve(data);
}).catch(err => {
reject(err)
})
})
}
最后 掛載到Vue對(duì)象上
再main.js中：
import {getService, postService} from '@/utils/url.js'
// 掛載請(qǐng)求方法
Vue.prototype.$http = {
POST: postService,
GET: getService
}
大功告成
