2020-03-19

axios http请求

安装

切换到项目目录
cd [图片上传失败...(image-3b3e09-1584632007059)]

router
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 = "[图片上传失败...(image-1c9aab-1584632007059)]

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[图片上传失败...(image-978b98-1584632007058)]

st.php")
$http.get("[图片上传失败...(image-5c570b-1584632007058)]

http://www.520mg.com/mi/list.php")
效果一样

本地json获取

1.将json文件放在assets目录下
[图片上传失败...(image-4672ba-1584632084459)]]

https://upload-images.jianshu.io/upload_images/15030543-8333943bf77bc0a7.png)
2.修改配置
[图片上传失败...(image-cac8de-1584632084460)]]

https://upload-images.jianshu.io/upload_images/15030543-23828ebc1c63c667.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp)
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) //检测是否有某个值