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,导入代码:

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表单提交(图片上传,文件上传)
  • application/json
    1)application/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>

put和patch的区别 axios中的put和patch有什么区别_冰雪为融的博客-CSDN博客_axios.patch 

因为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"
 //查询分页数据
    queryTableDataByPage(pageNum) {
      if(this.filters.startTime && this.filters.endTime	){
        let tempDeliverStartDate = format(this.filters.startTime);
        let tempDeliverEndDate = format(this.filters.endTime);
        let tempStartDate = tempDeliverStartDate.substr(11, 8);
        let tempEndDate = tempDeliverEndDate.substr(11, 8);
        this.filters.startTime = tempDeliverStartDate.replace(tempStartDate, '00:00:00');
        this.filters.endTime	= tempDeliverEndDate.replace(tempEndDate, '23:59:59');

      }else {
        this.filters.startTime = "";
        this.filters.endTime	 = "";
      }

      let params = {
        pageNum,
        pageSize:this.pageSize,
        ...this.filters
      };

      this.currentPage = pageNum;
      this.tableLoading = true;
      // console.log("params--", params),
      getPageList(params).then(res => {

        this.tableData=res.data.list;
        this.total = res.data.total;
        setTimeout(() => {
          this.tableLoading = false;
        }, 200);
      }).catch(() => {
        setTimeout(() => {
          this.tableLoading = false;
        }, 200);
      })
    },

或者写个接口统一集成模块 api.js, 再把各个接口export出去

/*  接口统一集成模块 */
//首页 mock接口

import * as customer  from './modules/customerManage';//客戶管理
import * as productManage  from './modules/productManage';//产品管理
import * as contractManage  from './modules/contractManage';//合同管理
import * as receivablesPlan  from './modules/receivablesPlan';//回款计划


// 默认全部导出
export default {
  customer,
  productManage,
  contractManage,
  receivablesPlan,
}

通过this.$api.注册的接口(receivablesPlan).接口里的方法(getReceivablesPlan).then((res)=>{

this.tableData=res.data.list;

})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐