安装axios
npm install axios --save
根目录下创建api文件夹,在api文件夹下创建network.js和index.js文件:
在network.js对axios进行全局配置并封装:
// 导入axios
import axios from 'axios';
// 进行一些全局配置
// 公共路由(网络请求地址)
const baseUrl = {
dev: "xxxxxx",
pro: "XXXXXX"
}
axios.defaults.baseURL = process.env.NODE_ENV === "development"
? baseUrl.dev
: baseUrl.pro;
// 请求响应超时时间
axios.defaults.timeout = 5000;
// http request 拦截器 请求拦截器
axios.interceptors.request.use(
config => {
// const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
// config.data = JSON.stringify(config.data)
config.data = JSON.stringify(config.data)
config.headers = {
// 'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json;charset=UTF-8'
}
// if(token){
// config.params = {'token':token}
// }
return config
}, error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(response => {
return Promise.resolve(response.data)
}, error => {
// 错误信息
console.log(error.response.data.message || "undefined");
return Promise.reject(error)
});
// 封装自己的get/post方法
export default {
get: function (path = '', data = {}) {
return new Promise(function (resolve, reject) {
axios.get(path, {
params: data
})
.then(function (response) {
// 按需求来,response.data || response
resolve(response);
})
.catch(function (error) {
reject(error);
});
});
},
post: function (path = '', data = {}) {
return new Promise(function (resolve, reject) {
axios.post(path, data)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
reject(error);
});
});
}
};
index.js:专门用于管理请求各种接口地址,配置相应代码:
// 导入封装好的网络请求类工具
// 两种方式(如果封装自己的get/post方法,只能用第一种)
import Network from './network';
//import axios from 'axios';
// 封装各种接口请求
export const name = (params) => Network.get('api/statistic', params);
// export const name = (params) => {
// return axios.request({
// url: 'api/statistics',
// method: 'get',
// params: params
// })
// }
使用:
import { name } from "@/api/index";
name(params).then((res)=>{
console.log(res)
})