vue-axios(一)

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

在实际项目中,页面中所需的数据通常是从服务器获取的,这必然牵涉与服务器·的通信,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请求是在请求体发送数据,axiospost方法比get方法多一个参数,该参数是一个对象,对象的属性就是要发送的数据。代码如下:

axios.post('url',{    params:{      username:'hgk',      password:'1234'    }  }).then(function (response){
  }).catch(function (error){
  })

复制代码


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

response对象的完整属性如下:

  • data:{}:data 是服务器发回的响应数据
  • status:200 :status 是服务器响应的 HTTP 状态码
  • statusText:‘ok’:是服务器响应的 HTTP 状态描述
  • headers:{} :是服务器响应的信息报头
  • config:{} : 是为请求提供的配置信息
  • request:{} :是生成此响应的请求
目录
相关文章
|
7月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
75 1
|
JSON JavaScript 前端开发
Vue-axios的使用
前言:页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它。 vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:使用说明 · Axios 中文说明 · 看云
|
3月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
4月前
|
JavaScript API
Vue2.X项目超简单整合Axios并使用
这篇文章提供了Vue 2.X项目中如何整合Axios的详细步骤,包括配置请求拦截器、响应拦截器、错误处理以及在Vue组件中调用Axios进行数据请求的方法。
66 0
|
JavaScript 前端开发
vue框架中的axios
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
67 0
|
API
vue3 使用axios
要在Vue3中使用axios,需要先安装axios库。可以在终端中使用以下命令来进行安装:
171 0
|
7月前
|
JavaScript 前端开发
vue的axios方法
vue的axios方法
42 0
|
前端开发 JavaScript
vue3 使用axios get方式使用
在Vue3中使用Axios库进行GET请求的方法如下: 首先需要导入Axios库:
395 0
|
JSON 前端开发 JavaScript
Vue--axios
Vue--axios
|
JavaScript 前端开发
vue axios 的使用
vue axios 的使用
50 0