精通Vue.js系列 │ 在Vue项目中使用Axios - 网站源码_资源分享

原副标题：通晓Vue.js系列产品 │ 在Vue工程项目中采用Axios

为的是在Vue工程项目中采用Axios，具体来说要加装Axios应用程序和较旧的Vue-Axios应用程序。Vue-Axios应用程序能把Axios与Vue更方便快捷地资源整合在一同，容许模块透过this.axios的方式来出访Axios。

对helloworld工程项目，在DOS配置文件转到helloworld子目录下，运转下列指示，就会加装Axios和Vue-Axios应用程序：

npminstall axios vue-axios

在src/main.js中导入Axios和Vue-Axios应用程序，参看解释器1。

■解释器1 main.js

import{createApp }fromvue importApp from./App.vue importrouter from./router importaxios fromaxios importVueAxios fromvue-axios

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

接下来在Vue模块的代码中就可以透过this.axios的方式出访Axios了。

异步请求

解释器2定义了GetCustomer模块，它根据用户输入的id到服务器端查询匹配的customer对象，把它显示到网页上。

■解释器2 GetCustomer.vue

< template> < div> < p> 输入id: < inputv-model= “customer.id”/> < button@ click= “getCustomer”> 查询 </ button> {{msg}}</ p> < p> {{isLoading}} </ p> < p> 名字：{{customer.name}} </ p> < p> 年龄：{{customer.age}} </ p> </ div> </ template> < > exportdefault{ data{return{ customer: { id: , name: , age: }, msg: , isLoading: } },methods: { getCustomer{this.customer.name=this.customer.age= this.msg= this.isLoading= 正在查询…this.axios({ baseURL: http://www.javathinker.net, url: /customer, method: get, params: { id: this.customer.id} }).then( ( response)=> { this.isLoading=if(response.data !== null){ this.customer=response.data } elsethis.msg= 未找到匹配的数据！}).catch( ( error) => { this.isLoading= console.log(error) })}}}</ >

在GetCustomer模块的getCustomer方法中，透过axios函数发出Ajax请求：

this.axios({ //返回Promise对象baseURL: http://www.javathinker.net, url: /customer, method: get, params: {id: this.customer.id}})

以上axios函数的参数是一个请求配置对象，在该请求配置对象中，baseURL属性表示根URL，url属性表示相对URL，method属性表示请求方式，params属性表示请求参数（也称为查询参数），以上代码也可以简写为：

this.axios . get( http://www.javathinker.net/customer?id=+ this.customer.id)

在src/router/index.js中，为GetCustomer模块设置的路由的路径为/getcustomer。透过浏览器出访http://localhost:8080/#/getcustomer，在网页的id输入框中输入1，然后单击“查询”按钮，会看到网页上先显示提示信息“正在查询…”，接下来再显示相应的customer对象的信息，参看图1。

■图1 查询id为1的customer对象

如果在网页的id输入框中输入5，然后单击“查询”按钮，会看到网页上先显示提示信息“正在查询…”，接下来显示“未找到匹配的数据！”。

在GetCustomer模块的getCustomer方法中，先把isLoading变量设为“正在查询…”，接下来再调用axios函数，axios函数会异步请求出访服务器：

this.isLoading= 正在查询…this.axios({ …}).then( (response)=> {this.isLoading=…}). catch( (error) =>{ this.isLoading= …})

在浏览器与服务器进行异步通信的过程中，浏览器的主线程会继续运转，刷新网页上的{{isLoading}}插值表达式，显示当前值“正在查询…”。等到浏览器与服务器的通信结束，浏览器端接收到了响应结果，就会执行then函数，把isLoading变量的值改为“”，并且如果response.data不为null，还会把response.data赋值给customer变量。Vue框架的响应式机制会同步刷新网页上的{{isLoading}}、{{customer.name}}和{{customer.age}}插值表达式。

Promise对象的then函数的返回值仍然是Promise对象，它会异步执行then函数的参数指定的函数。下列代码从表面上看，是把响应正文显示到网页上：

<template><div>{{content}} </div></template>

<>…mounted{let result={}

this.axios. get( http://www.javathinker.net/customer?id=1) .then(response=>{result=response. data})

this.content=result }…</

实际上，以上代码中的赋值语句的执行顺序为：

let result={}this.content=result result=response. data

因此，网页上的{{result}}表达式的值始终为{}。

POST请求方式

解释器3定义了Calculate模块，它会把用户输入的变量x和变量y透过POST请求方式传给服务器，服务器返回x+y的运算结果，Calculate模块再把运算结果显示到网页上。

■解释器3 Calculate.vue

< template> < divid= “app”> < p> 输入变量x: < inputv-model.number= “x”/> </ p> < p> 输入变量y: < inputv-model.number= “y”/> </ p> < button@ click= “add”> 计算 </ button> < p> {{result}} </ p>

</ div> </ template> < > exportdefault{ data{return{ x: 0, y: 0, result: } },methods: { add{this.axios.post( //采用POST请求方式http://http://www.javathinker.net/add, x=+ this.x+ &y=+ this.y //请求正文).then( response=> { this.result= this.x+ ++ this.y+ =+response.data }).catch( error=> { console.log(error)})}}}</ >

GetCustomer模块的add方法透过axios.post函数指定请求方式为POST，该函数等价于下列axios函数：

this.axios({ baseURL: http://www.javathinker.net, url: /add, method: post, //指定POST请求方式data: x=+ this.x+ &y=+ this.y //请求正文})

在src/router/index.js中，为Calculate模块设置的路由的路径为/calculate。透过浏览器出访http://localhost:8080/#/calculate，在网页的变量x和变量y的输入框中分别输入数字，然后单击“计算”按钮，add方法就会请求服务器计算x+y，再把运算结果显示到网页上，参看图2。