axios http请求
安装
切换到项目目录
cd /vrouter
cnpm install axios -S
挂载
main.js
import axios from 'axios';
Vue.prototype.$http = axios;
get
this.$http.get(url?page=1)
this.$http.get(url,params:{page:2})
post
this.$http.post(url,"k=v&k2=v2",{
""Content-Type":"application/x-www-form-urlencoded""
})
file
1.获取文件
let file = this.$refsfile[0]
2.formData
let data = new FormData(). data.append('file',file);
3.配置
let configs = {
headers:{'Content-Type':'multipart/form-data'}
}
4.请求
this.$http({
url:',
data,
configs
})
全局配置
作用
1.方法修改请求域名，切换地址
2.省略了再每个ajax请求都需要配置的事情
在main.js配置
import axios from 'axios';
axios.defaults.baseURL = "http://520mg.com";
// 配置基础url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 配置post编码
// axios.defaults.withCredentials = true;
//跨域请求的全局凭证
Vue.prototype.$http = axios;
//挂载axios 到vue的原型公用方法上面
//所有vue的实例都将拥有$http
使用的时候
$http.get("/mi/list.php")
$http.get("http://www.520mg.com/mi/list.php")
效果一样
本地json获取
1.将json文件放在assets目录下
2.修改配置
3.在component.ts中读取
getRequest() {
return this.http.get("assets/json/report.json")
.subscribe((res: Response) => {
this.result = res.json()
});
}
JSONP
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
引入jsonp
import jsonp from '../assets/js/jsonp'
JSONP优缺点:
jsonp优点:
完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，
这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化
jsonp缺点:
1.jsonp只支持get请求而不支持post请求
2.jsonp存在安全性问题
请求头跨域
要求后端返回给前端的响应，响应头有
Access-Control-Allow-Origin:*
php代码写
header("Access-Control-Allow-Origin:*")
proxy 代理
可以对目标对象的读取调用...进行拦截1
1.目标对象
let target = {name:"yaya",age:18}
2.处理
let handler ={
get(target,key){},
set(target,key,value,receiver){}
}
3. let proxy = new Proxy(target,handler)
处理函数
set
get
has()
ownkeys
apply
...
Reflect
反射
对 对象进行一些操作，方便代理处理
常用
Reflect.ownKeys(obj) //获得对象键的列表
Reflect.set(obj,key,value) //设置对象的值
Reflect.get(obj,key) //获得对象的值
Reflect.has(obj,key) //检测是否有某个值
