头歌（Educoder）——Vue基础——Vue3 Ajax(axios)请求

第1关：Vue3 Ajax(axios)请求

任务描述

本关任务：编写一个能从指定 API 获取笑话的程序。

相关知识

为了完成本关任务，你需要掌握：

1. Vue 与 Ajax；

2. axios 请求的特点；

3. 安装 Axios；

4. 创建实例的方法；

5. axios 实例方法；

6. 具体代码演示；

7. 实现跨域请求。

Vue 与 Ajax

Vue 本身是不支持发送 ajax 请求，需要通过其他库来实现的（比如 vue1.0 版本官方推荐的 vue-resource、vue2.0 版本官方推荐的 axios），或者也可以使用 jquery 来发送 ajax 请求。

vue-resource 是 Vue.js 的插件提供了使用 XMLHttpRequest 或 JSONP 进行 Web 请求和处理响应的服务。 当 vue 更新 到 2.0 之后，作者就宣告不再对 vue-resource 更新，而是推荐的 axios，所以建议大家了解一下 vue-resource 就可以。 vue-resource 的 github https://github.com/pagekit/vue-resource。

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios 的 github:https://github.com/axios/axios。

axios 请求的特点

1. 支持 node 端和浏览器端: 同样的 API，node 和浏览器全支持，平台切换无压力；

2. 支持使用 Promise 管理异步，告别传统 callback 方式；

3. 丰富的配置项: 支持请求和响应的拦截, 提前处理请求和响应数据。

安装 Axios

1. 使用 cdn:

<script src="https://webproxy.poorya-velaei-d67.workers.dev/https://unpkg.com/axios/dist/axios.min.js"></script>

或

<script src="https://webproxy.poorya-velaei-d67.workers.dev/https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

1. 使用 npm: npm install axios

2. 直接导入 js 文件

这里我选择去 github，搜索 axios：

官方文档下有非常详细的 API,这里我们就通过直接引入的方式来使用，也就是方法三

创建实例的方法

首先我们来看一个简单的案例：

1. // 使用axios
2. axios({
3. url:"https://api.github.com/users"
4. }).then(result => {
5. console.log(result);
6. })

示例中，我们并没有请求类型，axios 默认请求为 get 请求。

如果希望发送 post 等其他方式的 请求, 可以在配置对象中添加 method 选项

例如:

1. // 使用post发送请求
2. axios({
3. url:"https://jsonplaceholder.typicode.com/posts",
4. method: "post"
5. }).then(result => {
6. console.log(result);
8. })

axios 实例方法