axios的常用五种请求方法介绍（get、post、put、patch、delete）

axios 中文网

为方便起见，axios为所有支持的请求方法提供了别名
params 是将与请求一起发送的 URL 参数，对应后台中的query
data 是作为请求主体被发送的数据，对应后台中的body

axios.request(config)
axios.get(url[, config])  // 只支持 params 传参
axios.delete(url[, config])  // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持  data 和 params
axios.put(url[, data[, config]]) // 同时支持  data 和 params
axios.patch(url[, data[, config]]) // 同时支持  data 和 params

注意

在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

  get：获取数据
  post：提交数据（表单提交+文件上传）
  put：更新数据（所有数据推送到后端）
  patch：更新数据（只将更改的数据推送到后端） delete：删除数据

首先安装并导入axios，导入代码：

npm i axios --save
import axios from 'axios'

1. get方法

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            axios.get('接口地址', {
                params: {
                    id: 12,//请求参数
                },
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'get',//请求方法
                params: {
                    id: 12,//请求参数
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

注意：方法1，传入参数的时候，需要 { } 然后在里面传入 params 这个参数，一定要是params。
params会出现在请求头中的querry string parameters中，并且会出现在浏览器的地址栏中，即会拼接到url中。

2. post请求

post方式请求，参数有两种形式：

• form-data表单提交（图片上传，文件上传）
• applicition/json

1. applicition/json请求方式代码如下：

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data={
                id:12
            }
            axios.post('接口地址', {data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

2. formData请求方式代码如下：

<script>
    import axios from 'axios'
    export default {
        name: 'post请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            let formData = new formData()
            for(let key in data){
                fromData.append(key,data[key])
            }
            axios.post('接口地址', {fromData}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'post',//请求方法
                data: fromData,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

post的请求头中会有一个content-type，该字段有两个值，一个为form-data，一般用于表单提交（文件上传，图片上传等等）；另一个是application/json即，传递的是json数据。

3. put请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.put('接口地址', {data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'put',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

4. patch请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            axios.patch('接口地址', {data}).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                data: data,
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

5. delete请求

<script>
    import axios from 'axios'
    export default {
        name: 'get请求'，
        components: {},
        created() {
            //写法一
            let data = {
                id:12
            }
            //url传递参数
            axios.delete('接口地址', {
                parmas:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //post方式传递参数
            axios.delete('接口地址', {
                data:{
                    id:12
                }
            }).then(
                (res) => {
                    //执行成功后代码处理
                }
            )
            //写法二
            axios({
                method: 'patch',//请求方法
                parmas:{
                    id:12
                },
                url: '后台接口地址',
            }).then(res => {
                //执行成功后代码处理
            })
        }
    }
</script>

因为axios的post和get带参数的请求方法是不大一样的。

get带参数请求的axios封装

//项目房间新增与编辑
import axios from '../axios';
//运输服务配置
let path = '/deliverAlteration';
//新增与编辑
export const save = (data) => {
  let url = (data.id) ? `${path}/` : `${path}/`;
  let method = (data.id) ? 'PUT' : 'POST';
  return axios({
    url,
    method,
    data
  });
};
 
//分页查询表格数据  未发货
export const getPageList = (params) => {
  return axios({
    url: `${path}/page`,
    params
  });
};
// /deliverAlteration/getPlan 不分页
export const getAllList = (params) => {
  return axios({
    url: `${path}/getPlan`,
    params
  });
};
//打印 生产计划表格 html
export const getPrintHtml = (params) => {
  return axios({
    url: '/deliverAlteration/printAlterationDeliver',
    params
  });
};
 
//删除
export const deleteTableItem = (data) => {
  return axios({
    url: `/camera/${data.id}`,
    method: 'DELETE',
  })
};
 
 
// 导出  发货计划变更记录
export const exportSendPlanChange = (params) => {
  return axios({
    url: `/deliverAlteration/exportAlterationDeliver`,
    params,
    responseType:'blob'
  });
};

引入方法

import {
  getPageList,
} from "@/http/modules/sendPlanChange"