项目总结之vue-axios 拦截器的使用和vuex 模块化的使用(解决跨域)

公司的后台在每次请求的时候都需要给一个最新的token值给你保存起来,后面每个页面都需要这个token值加上请求地址来请求数据的,我刚开始用axios直接this.$http.post请求或者get一直报错,401到500都有,后来公司大牛指点:先新建一个js文件,里面引入axios,然后直接可以设置axios.defaults.headers['content-type']="xxxxx"  这样直接设置默认的请求头,然后创建一个axios实例(这里设置一个baseURL:process.env.BASE_URL...对应下面的默认代理设置),设置拦截器,这个网上有具体代码,让后让vuex里的文件引入一个具体的名称如:api,在vuex里的action里设置请求,如:deleUser({commit,state},参数){return new Promise((reject,resolve)=>{

api({url:'',method:'post/get',data:'传参数据'}).then((data)=>{resolve(data)}).catch((err)=>{reject(err)})

})}

这样通过promise把成功请求到的值传给调用this.$store.dispatch('deleUser','参数').then((res)=>{}).catch((err)=>{});

页面上虽然这样写,但是还需要设置代理跨域,在config.index.js里设置proxyTable(网上有教程,代理名称为api);然后config.dev.env.js里加一个BASE_URL:'/api',这表示默认请求代理地址,

 

也不知道说的明不明白.主要是设置了axios拦截器,拦截器的默认地址设置为你的代理跨域请求的名称,我文件里统一用的是api,就可以实现项目的跨域请求了