关于Element UI中，使用axios进行post请求的问题

关于axios的引入问题具体格式如下

在vue项目中的main.js中使用import引入：
import axios from 'axios’
import qs from 'qs’
！以上会在webpack创建项目时，自动下载好，只管像这样引用即可！

关于post请求的一些问题

1、关于请求头：
弄清楚你需要的是什么请求头类型，post一般是json格式，如下：
’Content-Type’ : 'application/json;charset=utf-8’

2、如何设置：
在main.js中，直接设置即可，这样就不用在每次请求的时候专门写它。如下：
axios.defaults.headers [‘Content-Type’] = 'application/json;charset=utf-8’

3、设置好请求头之后，就可以使用了吗？ 当然还不可以，你还需要挂载在Vue的属性上，这样在每个页面就都可以使用了！

如何 挂载：
Vue.prototype.$axios = axios;
Vue.prototype.qs=qs;

基本上到这一步，就是引用成功了，可以在页面中使用了！
具体使用格式如下：
1.格式一：
this.$axios({
url : ’ 请求地址 ’ ， // 一般是 /api/login 等格式
method:’ post / get /put /delete’ ， //选择其中的一个
data:{ //数据区 }，
transformRequest:[function(data){
data=JSON.stringify(data);
return data;
// 将data格式转换成json字符串
}]
})

---

2.格式二：
let url='地址’
let data={}
this.$axios.get({ url , data }).then((res)=>{
//成功请求后返回的数据
}).catch((err)=>{
//请求失败返回的错误信息
})

需要说明的是，有些vue项目会涉及到token验证，这个时候你就需要加一个请求拦截器

将获取的token在每次请求时赋给请求的 Authorization上面即可！这就是拦截器的作用。具体使用如下：
在axios挂载之前使用：
axios.interceptors.request.use((config)=>{
const token=store.state.token; //store 表示Vuex，你也可以用其他几种缓存方式
config.headers.Authorization = token;
// 这里需要注意的是有些请求是不需要token的，加上token反而会报错，可以将值设置为空即可。
config.headers.Authorization = ’ ’
})

有请求拦截器，自然就有响应拦截器

在响应拦截器中，你可以根据项目的实际情况作出一些判断，比如：
axios.interceptors.response.use( (res) =>{
// 未设置状态码啧默认成功
const code=res.data.code || 200; // 返回的code状态码
// 获取的错误信息
const message=errorCode[code] || res.data.msg || errorCode[‘default’];
// 下面进行判断
if ( code === 401 ) {
// 登录状态过期，返回登录页
ElementUI.MessageBox.confirm( message:‘内容’，title:‘标题’，
options : { confirmButtonText : ‘重新登录’ ,cancelButtonText : ‘取消’ ,type : ‘warning’ }.then(()=>{ //点击重新登录的回调 })
} else if( code===500 ) { // 等等… 根据自己的需求写 }
})
ElementUI 是指引入的Element UI 框架。