从去年八月份开始,断断续续的接触vue ,中间由于跨域代理问题闹过一些尴尬的问题。写总结,促使我加深对知识点的记忆。有不对的地方请多指教。
代理跨域, 浏览器之间是有同源策略的,处于安全考虑不同域之间,不允许获取数据,img script audio等标签除外,但这些通常都是get的形式。而如果用js的ajax去远程获取的话就会触发同源策略,需要后台设置同意跨域才可以,比较麻烦。
所以Vue里用到了代理跨域,所谓代理跨域,就是代替前端用后端发出http请求。在vue的脚手架中,运行项目是npm run dev或者,npm run start ,其实是打开了它已经配置好的node服务器,vue的代理就是通过node来代替前端发起http请求。
在项目文件里找到config文件夹里的index.js 文件,修改dev下的proxyTable属性,在target里添加代理的目标地址。
设置好代理之后,在页面里引入axios,可直接使用get请求
import axios from 'axios'
axios.get('/api/apiserver/basic',{
params:{
pageIndex: 1,
pageSize: 20,
onlySustained: false,
warnTimeStart: "2019-01-01",
warnTimeEnd: "2019-05-06",
}
})
.then(res=>{
console.log(res)
console.log(res.data)
this.AllInfo=res.data
})
.catch(err=>{
console.log(err)
})
POST请求:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response=> {
console.log(response);
})
.catch(error=>{
console.log(error);
});
执行多个并发请求:
在执行多请求并发的时候,其中有一个请求失败,直接都不再请求了,而且会返回数据报错信息.
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
请求的一些配置(常用的):只有url是必须的,如果没有指定method,请求将默认使用get方法。
url:"/getuser" 用于请求的服务器URL;
method:“get/post” 默认是get ,创建请求时使用的方法。
transform Request 允许在服务器发送前,修改请求数据
只能用在put post patch 这几个请求方法。后面数组中的函数必须返回一个字符串,或者ArrayBuffer或者Stream
transformRequest:[function(data){
对data 进行任意的转换处理;
return data}];
transformResponse: 在传递给then,catch前 允许修改响应数据
headers是即将被发送的自定义请求头
params 是即将与请求一起发送的url参数。
paramsSerializer 是个负责params 序列化的函数。
data 是作为请求主体被发送的数据
只适用于这些请求方法put post patch
在没有设置transformRequest时,必须是以下类型之一。
string,plain object ,ArrayBuffer,ArrayBufferView,urlSearchParams
浏览器专属: formData.file,Blob
node专属:Stream
timeout 指定请求超时的毫秒数(0表示无超时间) 如果请求花费了超过timeout的时间,请求将被中断。
withCredentials:false 表示跨域请求是否需要使用凭证。adapter:function(config){}:允许自定义处理请求,
请求拦截,
axios.interceptors.request.use(config=>{
//在发送请求之前做的事;
return config;},err=>{
//请求错误的处理
return.params.reject(err);});
响应拦截,返回数据处理
axios.interceptors.response.use(response=>{
//对返回数据处理 如发送请求时添加加载动画,当数据返回时 关闭加载动画。
return response};err=>{
//对返回数据错误时 处理。也许要关闭加载动画,并提示加载失败。
return Promise.reject(err);});