• 孙卫琴的《精通Vue.js》读书笔记-在Vue项目中使用Axios

    本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书
    在这里插入图片描述
    为了在Vue项目中使用Axios，首先要安装Axios插件，还有可选的Vue-Axios插件。Vue-Axios插件能够把Axios与Vue更方便地整合在一起，允许组件通过this.axios的形式来访问Axios。
    对于helloworld项目，在DOS命令行转到helloworld根目录下，运行以下命令，就会安装Axios和Vue-Axios插件：

    npm install axios vue-axios

    • 1

    在src/main.js中引入Axios和Vue-Axios插件，参见例程1。

    例程1 main.js

    import {createApp } from 'vue'
import App from './App.vue'
import router from './router'
import  axios from 'axios'
import VueAxios from  'vue-axios'

const app = createApp(App)
app.use(router)
app.use(VueAxios,axios)
app.mount('#app')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    接下来在Vue组件的代码中就可以通过this.axios的形式来访问Axios了。

    1. 异步请求

    例程2的GetCustomer.vue定义了GetCustomer组件，它根据用户输入的id，到服务器端查询匹配的customer对象，把它显示到网页上。

    例程2 GetCustomer.vue