与服务端通信——axios

与服务端通信——axios

在实际项目中，页面所需要的数据通常是从服务端获取的，这必然牵涉与服务端的通信，Vue官方推荐使用axios完成Ajax请求。axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。

安装

可以使用CDN方式安装：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果采用模块化开发，则使用npm安装方式：

npm install axios --save

在vue的脚手架项目中使用，可以将axios结合vue-axios插件一起使用，该插件只是将axios集成到Vue.js的轻度封装，本身不能独立使用。可以使用以下命令安装：

npm install axios vue-axios

安装vue-axios插件后，使用形式如下：

import {createApp} from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
​
const app = createApp(App);
app.use(VueAxios,axios)   //安装插件
app.mount('#app')

之后在组件内就可以通过this.axios调用axios的方法发送请求。

基本用法

HTTP最基本的请求就是get和post。使用axios发送get请求调用形式如下：

axios.get('/book?id=1')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    })

get方法接收一个URL作为参数，如果有要发送的数据，则以查询字符串的形式附加在URL后面。当服务端发回成功响应（状态码是2XX）时调用then()方法中的回调，可以在该回调函数中对服务端的响应进行处理；如果出现错误则会调用catch中的回调，可以在该回调函数中对错误信息进行处理，并向用户提示错误。

如果不喜欢URL后附加查询参数的写法，可以为get方法传递一个配置对象作为参数，在配置对象中使用params字段指定要发送的数据：

axios.get('/book',{
    params:{
        id:1
    }
})
.then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.log(error);
    })

可以使用ES2017的async/await执行异步请求：

async function getBook(){
    try {
        const response = await axios.get('/book?id=1');
        console.log(response);
    } catch(error){
        console.error(error);
    }
} 

post请求是在请求体中发送数据，因此，axios的post方法比get方法多一个参数，该参数是一个对象，对象的属性就是要发送的数据：

axios.post('/login',{
    username:'lisi',
    password:'1234'
})
.then(function(response){
    console.log(response);
})
.catch(function(error) {
    console.log(error);
});

get()和post()方法的原型如下：

get(url[,config])
post(url[,data[,config]])

接收到服务端的响应信息后，需要对响应信息进行处理。例如，设置用于组件渲染或更新所需要的数据。回调函数中的response是一个对象，该对象常用的属性是data和status，前者用于获