在 Vue 中使用 Axios 发送请求

Question

Vue 没有内置的 HTTP 请求库。 官方的 Vue 推荐使用 Axios 与 REST API 交互。

本教程将使用优秀的 JSONPlaceholder API 来提供示例数据。 例如如果您键入 https://jsonplaceholder.typicode.com/users/1 在浏览器的 URL 栏中，您将收到以下响应：

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

显示响应数据

axios.get() 函数 执行一个 HTTP GET 并返回一个 Promise。 所以调用 await axios.get('https://jsonplaceholder.typicode.com') 给你一个对象 data 属性包含上述 JSON 数据。

请记住，Vue 钩子可以是 异步函数 。 这意味着您可以使用 async/await 来执行 Axios 请求。

const url = 'https://jsonplaceholder.typicode.com/users/1';

const app = new Vue({
  data: () => ({ user: null, error: null }),
  // Display username if available, and error message if not
  template: `
    <div>
      <div v-if="user != null">
        {{user.name}}
      </div>
      <div v-if="error != null">
        {{error.message}}
      </div>
    </div>
  `,
  mounted
});

async function mounted() {
  try {
    this.user = await axios.get(url).then(res => res.data);
    this.error = null;
  } catch (error) {
    this.user = null;
    this.error = error;
  }
}

使用服务器端渲染

不幸的是，上面编写的示例不适用于 Vue 服务器端渲染 ，因为：

1. Vue 的 renderToString() 不会调用 mounted 钩子，因为组件从未实际安装。
2. Vue 的 renderToString() 不等待异步钩子执行，所以即使你使用 created，上面的例子是行不通的。

但是，有一个简单的解决方法。 只需调用 mounted() 手动功能和 await 在上面。

await mounted.call(app);
const data = await renderToString(app);
data; // <div data-server-rendered="true"><div>Leanne Graham</div> <!----></div>