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

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

### Vue 中 axios 的使用 ###

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

# 一. 介绍 #

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

**了解更多：**[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]

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

1.  安装 `axios`  
    `npm install axios`
2.  在 `main.js` 页面引入 `axios` ,并配置默认请求接口  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]
    
        //配置axios,设置默认请求接口地址
        import axios from 'axios'
        axios.defaults.baseURL="http://xxxx:9810"
        Vue.prototype.$axios=axios
3.  组件中使用
    
        this.$axios.post('/url接口地址').then((res)=>{
          console.log(res)
        })

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

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

## 1.get 方式 ##

### 1.1 不带参数请求接口 ###

*  第一种方式
    
        axios.get('url接口地址').then((res)=>{
          console.log(res)
        }),
 *  第二种方式
    
        axios({
          method:'get',
          url:'url接口地址',
        }).then((res)=>{
          console.log(res)
        }),

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

*  第一种方式
    
        axios.get('url接口地址',{
          params:{
            id:1
          }
        }).then((res)=>{
          console.log(res)
        }),
    
        const obj={
          id:1
        }
        axios.get('url接口地址',{
          params:obj
        }).then((res)=>{
          console.log(res)
        }),
 *  第二种方式
    
        axios({
          method:'get',
          url:'url接口地址',
          params:{
            id:1
          },
        }).then((res)=>{
          console.log(res)
        }),
    
        const obj={
          id:1
        }
        axios({
          method:'get',
          url:'url接口地址',
          params:obj,
        }).then((res)=>{
          console.log(res)
        }),

## 2. post 方式 ##

### 2.1 不带参数请求接口 ###

*  第一种方式
    
        axios.post('url接口地址').then((res)=>{
          console.log(res)
        }),
 *  第二种方式
    
        axios({
          method:'post',
          url:'url接口地址',
        }).then((res)=>{
          console.log(res)
        }),

### 2.2 带参数请求接口 ###

*  第一种方式
    
        axios.post('url接口地址',{
            id:1
          }).then((res)=>{
          	console.log(res)
        }),
    
        const obj={
          id:1
        }
        axios.post('url接口地址',obj).then((res)=>{
          	console.log(res)
        }),
 *  第二种方式
    
        axios({
          method:'post',
          url:'url接口地址',
          data:{
            id:1
          },
        }).then((res)=>{
          console.log(res)
        }),
    
        const obj={
          id:1
        }
        axios({
          method:'post',
          url:'url接口地址',
          data:obj,
        }).then((res)=>{
          console.log(res)
        }),

## 3. put 方式 ##

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

## 4. patch 方式 ##

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

## 5. delete 方式 ##

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

*  第一种方式
    
        axios.delete('url接口地址',{
           params:{
             id:1
           }
         }).then(res=>{
           console.log(res)
         })
 *  第二种方式
    
        axios.delete('url接口地址',{
          data:{
            id:1
          }
        }).then(res=>{
          console.log(res)
        })

[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/6515ac74a89f489b8e13434aa9db4f6b.png