解决跨域
第一步：在vue.config.js中配置如下内容
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/'
}
}
}
配置完之后一定要重新启动项目：npm run serve
第二步，请求接口里写代理服务器地址
created(){
axios.get('/api')
.then(res=>{
console.log(res)
})
}
服务端文件server.js代码如下：
http.createServer((req,res)=>{
/* 这句话是允许跨域用的 */
// res.setHeader('Access-Control-Allow-Origin','*')
/* 下面是后端返回的结果 */
res.end('taotao:man not too fast')
/* 3000是端口 */
}).listen(3000,function(){
console.log('server start...')
})
在当前目录下启动服务使用命令：node server.js 不需要终止服务，继续运行npm run serve
终止服务：ctrl+c
重启就是先ctrl+c 再node server.js
执行多个并发请求
data(){
return {
url1:'https://cnodejs.org/api/v1/topics',
url2:'https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc'
}
},
created(){
Promise.all([axios.get(this.url1) , axios.get(this.url2)])
.then(res=>{
/* 两个请求都执行完毕了再返回结果 */
console.log(res)
})
// axios.all([ axios.get(this.url1) , axios.get(this.url2) ])
// .then( axios.spread( (res1,res2)=>{
// /* 两个请求都执行完毕了再返回结果 */
// console.log(res1)
// console.log(res2)
// }) )
}
}
两者的区别，一个返回的是数组形式，一个返回的是两个参数
axios局部配置
/* 自定义配置新建了一个axios实例 */
/* 使用这个instance实例都不用把url写全了，直接写路径（例如login） */
this.instance=axios.create({
baseURL:'http://timemeetyou.com:8889/api/private/v1/',
/* 请求花费超过了timeout的事件 请求就被打断 */
timeout:6000,
/* 给使用instance这个实例的接口都配置上headers */
headers:{
'Authorization':localStorage.token
}
})
},
methods:{
login(){
this.instance.post('login',{
username:'admin',
password:'123456'
})
.then(res=>{
console.log(res.data);
localStorage.token=res.data.data.token
})
},
axios全局配置
created(){
axios全局配置基本路径和请求头
axios.defaults.baseURL='http://timemeetyou.com:8889/api/private/v1/';
axios.defaults.headers.common['Authorization']=localStorage.token;
axios.defaults.timeout=3000;
全局配置 添加请求拦截器
每次发送都会进行拦截
axios.interceptors.request.use(function(config){
/* 再发送请求之前做些什么 */
console.log('config',config);
可以统一的给返回数据 再加属性和值
/* 在请求拦截的时候 添加请求头也是可以的 */
/* config.headers.Authorization=localStorage.token */
必须把config return出去
return config
},function(err){
/* 对请求错误做什么 */
return Promise.reject(err);
})
添加响应拦截器
**!!只要请求有响应 都会先走一遍响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('response',response)
/* 可以统一的给返回数据 再加属性和值 */
response.data.msg = '我是response我最大'
response也是必须要return出去的
/* 可以在响应拦截里面直接把数据data返回出去 */
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
},
methods:{
login(){
axios.post('login',{
username:'admin',
password:'123456'
})
.then(res=>{
console.log(res);
原本的token应该在res.data.data.token里，因为相应拦截器返回了res.data所以这少写一个
localStorage.token=res.data.token
})
},
