axios

安装

切换到项目目录
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.$refs.file[0]

2. formData

let data = new FormData().append("file",file);

3. 配置

 let configs = {
    headers:{'Content-Type':'multipart/form-data'}
  }

4. 请求

$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;
//跨域请求的全局凭证
// import axios from './assets/js/axios.min.js'
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.目标对象

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) //检测是否有某个值