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:{} :是生成此响应的请求
目录
相关文章
|
4天前
|
数据采集 人工智能 安全
|
13天前
|
云安全 监控 安全
|
5天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1102 152
|
18天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1778 9
|
10天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
708 152
|
12天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
664 14
|
7天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
467 5