在Vue中使用axios遇到的一些问题
关于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 框架。