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:{} :是生成此响应的请求
目录
相关文章
|
JavaScript 小程序 API
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】
1364 0
|
缓存 人工智能 并行计算
diffusers SD推理加速方案的调研实践总结(1)
diffusers SD推理加速方案的调研实践总结
443 13
|
存储 Go 索引
GO 集合 map 使用总结
GO 集合 map 使用总结
219 1
|
Ubuntu
蓝易云 - 虚拟机中Ubuntu16.04设置网络教程
以上就是在虚拟机中设置Ubuntu 16.04网络的基本步骤。具体的步骤可能会根据你的虚拟机软件和网络环境有所不同。
351 8
|
编解码 Linux vr&ar
如何使用ffmpeg将.m4a 格式转换为 pcma格式
ffmpeg是一款开源的万能媒体格式转换工具。它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多code都是从头开发的
|
编解码
MATLAB | SCI绘图配色第三期 | 二维柱状图 | 一人之下
MATLAB | SCI绘图配色第三期 | 二维柱状图 | 一人之下
306 0
|
安全 Java 数据安全/隐私保护
BurpSuite 安装与使用
BurpSuite 安装与使用
BurpSuite 安装与使用
|
运维 Cloud Native 持续交付
探索云原生架构的未来之路
【5月更文挑战第28天】在数字化转型的浪潮中,云原生架构以其高度灵活性、可扩展性及敏捷性成为企业技术战略的关键。本文深入剖析了云原生的核心组件和运作模式,探讨了其在不断变化的技术环境中如何适应并促进业务创新。通过分析微服务、容器化、持续集成/持续部署(CI/CD)等关键技术,文章揭示了构建和维护高效云原生系统的实用策略,同时指出了面临的挑战与未来的发展趋势。
|
存储 Java Linux
Nexus【部署 01】CentOS 7.5 环境下搭建私有Maven仓库实录(启动问题处理+安装文件 nexus-3.4.0-02-unix.tar.gz 云盘链接)
Nexus【部署 01】CentOS 7.5 环境下搭建私有Maven仓库实录(启动问题处理+安装文件 nexus-3.4.0-02-unix.tar.gz 云盘链接)
717 0
|
存储 Ubuntu Linux
Axel – 用于 Linux 的命令行文件下载加速器
Axel – 用于 Linux 的命令行文件下载加速器
Axel – 用于 Linux 的命令行文件下载加速器
下一篇
开通oss服务