4.数据请求
4.1.axios是什么？
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
在vue全家桶中，推荐使用，说白了就是用它来发送请求，和后端交互
4.2.简单使用
1.安装axios
npm install axios --save
2.使用axios发送get请求
在组件内部导入axios，这里以Demo1.vue为例：
import axios from 'axios'
在created中发送请求
created () {
axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
.then((response) => console.log(response))
}
完整代码：
<template>
<div class="page">
</div>
</template>
<script type="text/javascript">
import axios from 'axios'
export default {
data () {
return {
}
},
components: {
},
created () {
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list'
})
.then((response) => console.log(response))
}
}
</script>
<style scoped>
</style>
上面代码中打印出来的内容是一个对象，里面的内容结构为：
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
知识补充：在代码中使用到的后端地址是使用一个在线mock数据生成工具伪造的，具体工具如下
easy-mock地址: https://easy-mock.com
mockjs文档： https://github.com/nuysoft/Mock/wiki
mockjs案例： http://mockjs.com/examples.html
easy-mock的简单使用教程： http://blog.nodeing.com/archives/87.html
上面例子中使用get方式请求数据，其中get方式是默认的，因此，你也可以写成这样
axios('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
.then((response) => console.log(response))
3.使用axios发送post请求
接下来，你可以尝试着去发送一下post方法了，使用方法和jquery中ajax方法类似
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add'
})
.then((response) => console.log(response))
4.错误处理
你需要在catch里面处理错误，例如：
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add/1'
})
.then((response) => console.log(response))
.catch((err) => console.log(err))
5.传递参数方式
get请求方式传参数，配置params选项就可以了
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list',
params: {
title: 'xxx',
count: 30
}
})
.then((response) => console.log(response))
注意：params里面的内容作为查询字符串和url一起发送
post请求方式传参数，配置data选项
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add',
data: {
title: 'html最佳入门',
count: 80
}
})
.then((response) => console.log(response))
.catch((err) => console.log(err))
注意：data的内容作为请求体发送
4.3.请求方法的别名
为方便起见，为所有支持的请求方法提供了别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
举个例子，原来使用axios发送get请求我们写成这样
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list',
params: {
id: 10
}
})
.then((response) => console.log(response))
使用对应的别名发送，你可以写成这样
axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list', {
params: {
id: 10
}
})
.then((response) => console.log(response))
其他请求方式使用方法和上面例子类似
4.4.处理并发请求
有时候，你想一次执行多个请求，可以使用all方法
function http1 () {
return axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
}
function http2 () {
return axios.post('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/update')
}
axios.all([http1(), http2()]).then((response) => {
// 这里response返回一个数组 里面装了两个请求的返回结果
console.log(response)
})
上面代码中返回结果被放入到了一个数组中，如果想分别把结果拿出来，可以使用axios.spread方法
axios.all([http1(), http2()]).then(axios.spread((res1, res2) => {
// res1 对应http1的请求结果 res2对应http2的请求结果
console.log(res1, res2)
}))
螺钉课堂视频课程地址：http://edu.nodeing.com
