1.安装axios
npm install vue-axios --save
2.新建axios文件夹
import Axios from 'axios';
import qs from 'qs';
// axios 配置
// Axios.defaults.timeout = 5000;
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Axios.defaults.baseURL = ' ';//请求路径
Axios.defaults.withCredentials = false;//是否跨域
//取消请求
let CancelToken = Axios.CancelToken
// http request 拦截器
Axios.interceptors.request.use(config => {
// 参数 requestName 字段,用于决定下次发起请求,取消对应的 相同字段的请求
// 如果没有 requestName 就默认添加一个 不同的时间戳
let requestName
if (config.method === 'post') {
if (config.data && config.data.requestName) {
requestName = config.data.requestName
} else {
requestName = new Date().getTime()
}
}
// 判断,如果这里拿到的参数中的 requestName 在上一次请求中已经存在,就取消上一次的请求
if (requestName) {
if (Axios[requestName] && Axios[requestName].cancel) {
Axios[requestName].cancel('取消请求')
}
config.cancelToken = new CancelToken(c => {
Axios[requestName] = {}
Axios[requestName].cancel = c
})
}
config.data = qs.stringify(config.data)
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
return config;
}, err => {
// 错误
return Promise.reject(err);
});
// http response 拦截器
Axios.interceptors.response.use(res => {
// 成功
// if (res.data.code == '0') {
// alert(res.data.msg)
// }
return res;
}, err => {
// err
return Promise.reject(err)
});
/**
* get 请求方法
* @param url
* @param params
* @returns {Promise}
*/
export function get(url,data={}){
return new Promise((resolve,reject) => {
Axios.get(url,data).then(response => {
resolve(response.data)
},err => {
reject(err)
})
})
}
/**
* post 请求方法
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
Axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
})
}
export default Axios;
3.在main.js中引入
import { get, post } from './axios'
Vue.prototype.$get = get
Vue.prototype.$post = post
4.页面使用
test(){
this.$get('api',{}).then(res => {}).catch(err => {})
}