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方法

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

2. post请求

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

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

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

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

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

3. put请求

4. patch请求

5. delete请求

因为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"