hualinux 进阶 vue 4.0：使用axios与后端交互_vue4.0需要后端吗?-优快云博客

本文链接：https://blog.youkuaiyun.com/hualinux/article/details/115694989

前面说所说的vue及相关组件都没有与后端交互。

因为显示设备的多样化，现在基本上都是使用前后端分离，后端基本上都是使用api方式，基本上是以restful api为主。

所以这篇开始讲使用axios与后端api交互。可以先看一下vue.js官方的《使用 axios 访问 API》及 “axios中文文档”中的vue-axios

一、axios介绍

有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。

Fetch API 是一个用于此类请求的强大的原生 API。你可能听说过 Fetch API 其中的一个好处，就是你不需要在使用它的时候额外加载一个外部资源。确实如此！但是……目前它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。使用这个 API 还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。

二、aiios安装

2.1 vue-axios安装介绍

根据axios中文文档关于vue-axios安装，只要在vue项目根目录下执行

CommonJS:

npm install --save axios vue-axios

将下面代码加入入口文件:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

如果是使用脚本的话：按照这个顺序分别引入这三个文件： vue, axios and vue-axios

该包装器将axios绑定到Vue，如果您使用的是单个文件组件，则可以将其绑定。

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

2.2 使用webStorm安装

如果是webStorm可以在先点项目，再点最下方的终端Terminal中执行上面的安装命令即可，如下图所示：

安装完成后，如下图所示：

三、例子

官网使用 axios 访问 API例子，我在《hualinux 进阶 vue 3.1：vue cli手工创建Vue router》例子的基础上，直接修改。直接修改src/views/About.vue进行访问，代码如下：

<template>
  <div class="about">
    <div id="app">
      {{ info }}
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name:'About',
  data(){
    return{
      info: null,
    }
  },
  mounted () {
    axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => (this.info = response))
  }
}
</script>

运行并打开网页，点about