在实际项目中,页面中所需的数据通常是从服务器获取的,这必然牵涉与服务器·的通信,vue 官方推荐使用 axios 来完成 Ajax 请求。axios 是一个基于Promise
的 HTTP 库,可以用在浏览器和 node.js 中
安装 axios
可以将 axios 结合 vue-axios 插件一起使用,该插件只是将 axios 集成到 vue.js 的轻度封装,本身不能独立使用,在终端安装代码如下:
npm install axios vue-axios
复制代码
安装好 vue-axios 插件后,在 main.js 文件中导入axios
,代码如下:
import axios from 'axios'import VueAxios from 'vue-axios' Vue.use(VueAxios,axios)
复制代码
Vue.use(VueAxios,axios)
安装插件
之后在组件内就可以通过this.axios
来调用axios
的方法发送请求
基本用法
HTTP 最基本的请求就是get
请求和post
请求,使用axios
发送get
请求调用代码如下:
axios.get('url').then(function (response){ }).catch(function (error){ })
复制代码
get 方法接收一个 url 作为参数,如果有要发送的数据,则以查询字符串的形式附加在 url 后面。当服务端发回成功响应 HTTP 状态码(staus)的值为 200 时调用then
方法中的回调,可以在该回调函数中对服务端的响应进行处理,如果出现错误时会调用catch
方法中的回调,可以在该回调函数中对错误信息进行处理,并向用户提示错误。
可以给get
方法传递一个配置对象作为参数,在配置对象使用params
字段指定要发送的数据代码如下:
axios.get('url',{ params:{ } }).then(function (response){ }).catch(function (error){ })
复制代码
post
请求是在请求体发送数据,axios
的post
方法比get
方法多一个参数,该参数是一个对象,对象的属性就是要发送的数据。代码如下:
axios.post('url',{ params:{ username:'hgk', password:'1234' } }).then(function (response){ }).catch(function (error){ })
复制代码
接收到服务端的响应信息后,需要对响应信息进行处理,设置用于组件渲染或更新所需要的数据。回调函数中的response
是一个对象,该对象常用的属性是data
和status
response
对象的完整属性如下:
data:{}
:data 是服务器发回的响应数据status:200
:status 是服务器响应的 HTTP 状态码statusText:‘ok’
:是服务器响应的 HTTP 状态描述headers:{}
:是服务器响应的信息报头config:{}
: 是为请求提供的配置信息request:{}
:是生成此响应的请求