axios在项目中(vue)的使用
没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~
安装axios到项目中
npm install axios --save
配置wepack别名，不同环境访问不同的配置接口
配置：
使用：import config from 'config'
封装一个axios实例
新建fetch.js,在此创建axios实例与过滤器
若配置了代理。则config.apiBaseUrl则配置代理的前缀即可
const instance = axios.create({
baseURL: config.apiBaseUrl,// api的base_url
timeout: 10000,// 请求超时时间
// transformRequest: data => qs.stringify(data)
});
baseURL: config.apiBaseUrl,// api的base_url
timeout: 10000,// 请求超时时间
// transformRequest: data => qs.stringify(data)
});
application/json，转换后提交格式为
application/x-www-form-urlencoded
qs到项目中,可转换数据格式类型
使用qs转换请求对比图
添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
},function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
},function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 最后暴露实例
export default instance
实例的调用
若配置了express代理，请求路径为：浏览器->express开发服务器-----发送请求---->接口服务器
