Vue - axios 请求后台接口的几种方式

迈不过友情╰ 2021-07-26 02:20 1186阅读 0赞

Vue 中 axios 的使用

  • 一. 介绍
  • 二. vue项目中 中安装使用 axios
  • 三. axios 请求接口的五种方式
    • 1.get 方式
      • 1.1 不带参数请求接口
      • 1.2 带参数请求接口（params传参）
      1. post 方式
      • 2.1 不带参数请求接口
      • 2.2 带参数请求接口
      1. put 方式
      1. patch 方式
      1. delete 方式

一. 介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

了解更多：https://www.kancloud.cn/yunye/axios/234845

二. vue项目中 中安装使用 axios

  1. 安装 axios
    npm install axios

  2. 在 main.js 页面引入 axios ,并配置默认请求接口
    在这里插入图片描述

    1. //配置axios,设置默认请求接口地址
    2. import axios from 'axios'
    3. axios.defaults.baseURL="http://xxxx:9810"
    4. Vue.prototype.$axios=axios

  3. 组件中使用

    1. this.$axios.post('/url接口地址').then((res)=>{
    2.   console.log(res)
    3. })

三. axios 请求接口的五种方式

  • get：一般多用于获取数据
  • post：主要提交表单数据和上传文件
  • put：对数据全部进行更新
  • patch：只对更改过的数据进行更新
  • delete：删除请求

1.get 方式

1.1 不带参数请求接口

  • 第一种方式

    1. axios.get('url接口地址').then((res)=>{
    2.   console.log(res)
    3. }),

  • 第二种方式

    1. axios({
    2.   method:'get',
    3.   url:'url接口地址',
    4. }).then((res)=>{
    5.   console.log(res)
    6. }),

1.2 带参数请求接口（params传参）

  • 第一种方式

    1. axios.get('url接口地址',{
    2.   params:{
    3.     id:1
    4.   }
    5. }).then((res)=>{
    6.   console.log(res)
    7. }),
    9. const obj={
    10.   id:1
    11. }
    12. axios.get('url接口地址',{
    13.   params:obj
    14. }).then((res)=>{
    15.   console.log(res)
    16. }),

  • 第二种方式

    1. axios({
    2.   method:'get',
    3.   url:'url接口地址',
    4.   params:{
    5.     id:1
    6.   },
    7. }).then((res)=>{
    8.   console.log(res)
    9. }),
    11. const obj={
    12.   id:1
    13. }
    14. axios({
    15.   method:'get',
    16.   url:'url接口地址',
    17.   params:obj,
    18. }).then((res)=>{
    19.   console.log(res)
    20. }),

2. post 方式

2.1 不带参数请求接口

  • 第一种方式

    1. axios.post('url接口地址').then((res)=>{
    2.   console.log(res)
    3. }),

  • 第二种方式

    1. axios({
    2.   method:'post',
    3.   url:'url接口地址',
    4. }).then((res)=>{
    5.   console.log(res)
    6. }),

2.2 带参数请求接口

  • 第一种方式

    1. axios.post('url接口地址',{
    2.     id:1
    3.   }).then((res)=>{
    4.       console.log(res)
    5. }),
    7. const obj={
    8.   id:1
    9. }
    10. axios.post('url接口地址',obj).then((res)=>{
    11.       console.log(res)
    12. }),

  • 第二种方式

    1. axios({
    2.   method:'post',
    3.   url:'url接口地址',
    4.   data:{
    5.     id:1
    6.   },
    7. }).then((res)=>{
    8.   console.log(res)
    9. }),
    11. const obj={
    12.   id:1
    13. }
    14. axios({
    15.   method:'post',
    16.   url:'url接口地址',
    17.   data:obj,
    18. }).then((res)=>{
    19.   console.log(res)
    20. }),

3. put 方式

  1. const obj={
  2.   id:1
  3. }
  4. axios.put('url接口地址',obj).then(res=>{
  5.   console.log(res)
  6. })

4. patch 方式

  1. const obj={
  2.   id:1
  3. }
  4. axios.patch('url接口地址',obj).then(res=>{
  5.   console.log(res)
  6. }),

5. delete 方式

当写法参数为 params 时，请求接口时参数会放在URL里面

  • 第一种方式

    1. axios.delete('url接口地址',{
    2.    params:{
    3.      id:1
    4.    }
    5.  }).then(res=>{
    6.    console.log(res)
    7.  })

  • 第二种方式

    1. axios.delete('url接口地址',{
    2.   data:{
    3.     id:1
    4.   }
    5. }).then(res=>{
    6.   console.log(res)
    7. })

发表评论

表情：
评论列表 （有 0 条评论，1186人围观）

还没有评论，来说两句吧...

相关阅读

    相关 http几种请求方式

    我们要进行数据的采集，但网站肯定是设置了限制，为了突破这限制，我们需要模拟浏览器访问获取数据，那么首先要了解HTTP的请求，那么在Web中HTTP请求是怎样的呢?HTTP的请求

    女爷i女爷i/ 0 赞/ 93 阅读