Vue_异步加载_vue-resource（不再维护）

写在前面：vue-resource可以发送ajax，实现异步加载，但是Vue官方已经不再维护这个库了。

vue-resource依赖于vue，因此要先引入vue，再引入vue-resource。正确引入vue-resource后，再vue全局上会挂载一个$http方法，其上有一系列方法，每个HTTP请求类型都会对应一个方法。且vue-resource使用了promise，所以$http中的方法的返回值是一个promise。

1.请求方法

（1）POST请求

1.请求方法

（1）POST请求

post请求用于提交数据

常用data格式：

1）表单提交：multiparty / form-data，比较老的网站会使用表单提交去获取数据，现在基本都不会用表单提交，而是使用ajax，但是现在表单提交仍然存在，有时候需要做图片上传、文件上传；

2）文件上传：application / json，现在大多数情况下都是用这个格式。

使用方法：vm.$http.post(url,[body],[options])

1）url：必需，请求目标url；

2）body：非必需，作为请求体发送的数据；

3）options：非必需，作为请求体发送的数据

（2）GET请求

get请求用于获取数据

使用方法：vm.$http.get(url,[options])

（3）PUT请求

put请求用于更新数据，将所有的数据全都推送到后端

使用方法：vm.$http.put(url,[body],[config])

（4）PATCH请求

patch请求用于更新数据，将修改的数据全都推送到后端

使用方法：vm.$http.patch(url,[body],[config])

（5）DELETE请求

delete请求用来删除数据

使用方法：vm.$http.delete(url,[config])

（６）HEAD请求

head请求用来请求头部信心

使用方法：vm.$http.headf(url,[config])

（7）JSONP请求

除了jsonp以外，以上6种的API名称是标准的HTTP方法

使用方法：vm.$http.jsonp(url,[config])

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
    params: {
        wd: 'nn'
    },
    jsonp: 'cb'
}).then(res => {
    console.log(res)
})

【注】option参数说明

2.响应对象

（1）属性

属性	类型	描述
url	String	响应的URL源
body	Object，Bolb，string	响应体数据
headers	Header	请求头部对象
ok	Boolean	当HTTP响应码为200到299之间的数值时该值为true
status	Number	HTTP响应码
statusText	String	HTTP响应状态

（2）方法

方法	描述
text()	以字符串方式返回响应体
json()	以格式化后的json对象方式返回响应体
bolb()	以二进制Bolb对象方式返回响应体

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
    params: {
        wd: 'nn'
    },
    jsonp: 'cb'
}).then(res => {
    return res.text();
}).then(res => {
    console.log(res)
})