第一步：在src目錄下新建service文件夾，文件夾下新建api.js和http.js
第二步：http.js中封裝axios請求，可以復制如下代碼
import axios from 'axios'
import Qs from 'qs';
import {Message} from 'element-ui';
// 環境的切換:開發，測試，生產
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://10.100.14.181:8081'
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = ''
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = ''
}
axios.defaults.timeout = 5000
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// // 請求攔截器
axios.interceptors.request.use(config => {
// 在發送請求之前做些什么 驗證token之類的
return config;
}, error => {
// 對請求錯誤做些什么
Message.error({message: '請求超時!'})
return Promise.error(error);
})
// 響應攔截
axios.interceptors.response.use(response => {
// 對響應數據做點什么
return response;
}, error => {
// 對響應錯誤做點什么
return Promise.reject(error);
});
// 封裝get方法和post方法
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '請求成功', type: 'success'});
}).catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加載失敗', type: 'error'});
})
});
}
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '請求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加載失敗', type: 'error'});
})
});
}
/**
* post方法，參數序列化
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function qspost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, Qs.stringify(params))
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '請求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加載失敗', type: 'error'});
})
});
}
/**
* put方法，對應put請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function put(url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '請求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加載失敗', type: 'error'});
})
});
}
/**
* delete
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function deletefn(url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, params)
.then(res => {
resolve(res.data);
// Loading.service(true).close();
// Message({message: '請求成功', type: 'success'});
})
.catch(err => {
reject(err.data)
// Loading.service(true).close();
Message({message: '加載失敗', type: 'error'});
})
});
}
第三步：在api.js中統一管理各個頁面的接口，如下
第四步：在頁面中調用接口
完成~
參考資料來源於：https://www.cnblogs.com/yscec/p/12151263.html