Day 27 - Vue 与 HTTP请求 (2)

前一天我们对HTTP有了基础的概念，今天就要来谈谈要怎麽在vue中发送HTTP请求。
我们会引用axios这个函式库。

什麽是axios

Axios 是一个基於 promise 的 HTTP 库，应用於browser & node.js环境中，用於向後端发送请求。

axios有几个特性:

1. 从浏览器中建立 XMLHttpRequests
2. 从 node.js 建立 http 请求
3. 支援 Promise API
4. 拦截请求和响应

安装也十分简单，透过前几天介绍的npm便可以快速安装进你的专案中:

npm install axios

那就来看看要怎麽使用Axios吧。

GET

params这个物件是用来传递query parameter，以下的网址等效於: http://请求地址?id=12345

axios
  .get("请求地址", {
    params: {
      id: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST

axios
  .post("请求地址", {
    firstName: "jkc",
    lastName: "123",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

then後面为若请求成功，接下来要采取的动作，像是跳转网页拉等等的行为，倘若发生错误，会被下一行的catch捕捉，就不会进到then後面了。