VUE axios配置 自己用

VUE axios配置 自己用 （vue前端项目）

第一步：安装axios

npm install axios

第二步：在项目src路径常见api目录，把下面两个文件引进去
1）axios

/* 1.引入文件 */
import axios from 'axios'        //引入 axios库
import qs from 'qs'              //引入 node中自带的qs模块（数据格式转换）
 
/* 2.全局默认配置 */ 这里代理的是你后端的地址
let baseURL="http://localhost:8112"
// 判断开发环境（一般用于本地代理）
// if (process.env.NODE_ENV === 'development') { // 开发环境
//     baseURL = '/api'    // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
// } else {                                      // 编译环境
//     if (process.env.type === 'test') {        // 测试环境
//         baseURL = 'http://localhost:8112'
//     } else {                                  // 正式环境
//         baseURL = 'http://localhost:8112'
//     }
// }
// 配置axios的属性
axios.defaults.timeout = 6000;    // 请求超时时间1分钟                  
axios.defaults.baseURL =baseURL; // 你的接口地址 
axios.defaults.responseType="json";
axios.defaults.withCredentials=false;  //是否允许带cookie这些
 
/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
*喜好，我比较喜欢用这种方法，如下：
*/
const Axios = axios.create({
	baseURL:baseURL , 		      // 后台服务地址
	timeout: 60000, 		      // 请求超时时间1分钟
	responseType: "json",
	withCredentials: false    // 是否允许带cookie这些
});


 
/* 3.设置拦截器 */  
/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
时定义的变量*/
Axios.interceptors.request.use((config) => {
    //发送请求前进行拦截
    //  可在此处配置请求头信息
	config.headers["appkey"] ="...";
	config.headers["token"] ="...";

 	if (config.method == "post") {
  /*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
换，会使得参数丢失，造成请求失败。*/
 		// config.data = qs.stringify(config.data)
    config.data=JSON.stringify(config.data)
 	}
	return config;
  },(error) =>{
    //console.log("错误的传参", 'fail');
    return Promise.reject(error)
  })
Axios.interceptors.response.use((res) =>{
   //请求响应后拦截
   if(res.status == 200){                       // 对响应数据做些事
       //alert("提交成功")
       return Promise.resolve(res)
    }
    return res;
 }, (error) => {
    
   //alert("网络异常!") 404等问题可以在这里处理
   return Promise.reject(error)
 })
export default Axios 

2).index.js

import Axios from "./axios.js"  // 导入配置好的axios文件
// 封装axios请求函数，并用export导出
export function postEncoded(url,datas) {
    return Axios({
	url: url,
	method: "post",
	headers: {
	    'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form
	},
	data: datas
    })
}
export function postJson(url,datas) {
    return Axios({
	url: url,
	method: "post",
	headers: {
	    'Content-Type': 'application/json' //设置请求头请求格式为json
	},
	data: datas
    })
}
export function get(url,datas) {
    return Axios({
	url: url+datas,
        method: "get",
    })
}

第三步：main.js中引用

import { postJson,postEncoded } from '@/api' 
Vue.prototype.$postJson=postJson
Vue.prototype.$postEncoded=postEncoded

第四步，就可以使用了，切记，这里是json格式的，后端需要用相应的json格式接收

 const fileName = ""; //文件名
          const isOnline = ""; //是否在线显示
          this.$postJson('/fileUtil/download', { fileName: fileName, isOnLine: isOnLine }).then(res => {
            // 下载文件
          }).catch(err => {
            // 请求失败执行
            console.log(err)
          })

本文借鉴下面的文章改编而来，由于使用下边的代码，没有成功，稍作改动
借鉴