Vue使用Axios实现http请求以及解决跨域问题_axios跨域

//配置全局的axios默认值（可选）

axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

三、使用get方式的http请求

this.$axios.get(“请求url”,{param:{}})
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});

四、使用post方式的http请求

this.$axios.post(“请求路径”,{})
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});

**注意**：使用上述post方式提交参数的时候存在问题，axios中post的请求参数格式是form-data格式。而上述json串的格式为x-www-form-urlencoded格式


例如：


form-data:?name="zhangsan"&age=10 


x-www-form-urlencoded:{name:"zhangsan",age:10}


此时我们需要将数据格式作转换，在当前页面引入第三方库qs

import qs from “qs”

此时上述参数改为：

this.$axios.post(“请求路径”,qs.stringify({}))
.then(function(response){
console.info(response.data);
})
.catch(function(error){
console.info(error);
});

五、Axios的拦截器


  拦截器在main.js中进行配置，配置如下：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

基于以上的拦截器，我们可以对请求的数据或者是响应的数据做些处理，就拿上面post方式的请求参数格式举个例子，通过拦截器我们可以对所有的post方式的请求参数在发出请求之前作出转换：

import qs from “qs”

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 参数格式转换
if(config.method==“post”){
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

  因此基于拦截器我们在post请求的时候可以直接使用from-data的格式，不需要每次都编码转换


 六、前端跨域解决方案（了解）


描述：由于使用vue脚手架的目的就是使前后端分离，前端请求后端的数据在测试阶段设计到跨域请求问题，在前端中我们可以通过如下配置解决跨域请求问题。


  第一步（在config文件夹下的index.js中进行如下修改）

proxyTable:{
“/api”:{
target:“后端提供服务的前缀地址”,
changeOrigin:true,
pathRewrite:{
‘^/api’:‘’

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。