Vue 中使用axios库访问Rest服务

Axios 是一个基于 Promise 的 HTTP 库(官网),可以用在浏览器和 node.js 中。在 Vue 中,使用 axios 访问后台的Rest服务是非常方便的。

安装 axios

在项目目录中执行:

1
yarn add axios

使用 axios

以post 方法为例:

1
2
3
4
5
6
7
8
instance.post(<path>
, body
, {})
.then((result) => {
// handle result.data
}, (error) => {
console.error(error)
})

axios 可以使用默属性构造一个通用实例。

课程实验使用的 Rest API

在课程实验中,需要使用几个 Rest API, 简单描述如下:

  1. 登录接口

方法: POST

URL:

1
http://<主机名>:<端口>/api/login

参数,在Body中,JSON格式:

1
2
3
4
{
"userId":"xxxx",
"password":"xxxxx"
}

HTTP Heaer:

1
Content-Type: application/json
  1. 获取待办事项列表

方法: POST

URL:

1
https://<主机名>:<端口>/api/todos/list

参数: 无

HTTP Heaer:

1
2
Content-Type: application/json
--auth-token--: <your token>

your token指的是在登录时获取到的,服务端生成的token信息

  1. 更新一个待办事项

方法: POST

URL:

1
https://<主机名>:<端口>/api/todos/update

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

1
2
3
4
5
6
{
"id": 2,
"title": "Todo 2",
"desc": "This desc has been updated",
"completed": true
}

HTTP Heaer:

1
2
Content-Type: application/json
--auth-token--: <your token>
  1. 删除待办事项

方法: POST

URL:

1
https://<主机名>:<端口>/api/todos/del

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

1
2
3
4
5
6
{
"id": 2,
"title": "Todo 2",
"desc": "This desc has been updated",
"completed": true
}

HTTP Heaer:

1
2
Content-Type: application/json
--auth-token--: <your token>
  1. 新增待办事项

方法: POST

URL:

1
https://<主机名>:<端口>/api/todos/add

参数: 在Body中包含需要更新的待办事项信息(JSON格式):

1
2
3
4
5
{
"title": "Todo 2",
"desc": "This desc has been updated",
"completed": true
}

注意: 在新增操作中,不用指定待办事项的id

HTTP Heaer:

1
2
Content-Type: application/json
--auth-token--: <your token>

本文标题:Vue 中使用axios库访问Rest服务

文章作者:Morning Star

发布时间:2019年09月21日 - 12:09

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/web/vue/vue-access-rest-with-axios/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。