# http 请求 vue2 写法

let url = 'api/表名/方法名';
//如果参数很少后台又不想创建model,将参数放url上
//let url=''api/表名/方法名?a=1&b=2'

//第一个参数:url
//第二个参数:请求的参数
//第三个参数:是否显示发起请求时的提示信息(默认否)
this.http.post(url, {}, true).then((reslut) => {});
this.http.post(url, {}, '自定义提示信息').then((reslut) => {});
//get请求:this.http.get(url,{},true).then(reslut=>{})

//第4个参数自定义配置信息,具体更多配置见axios官方文档
this.http
  .post(url, {}, '自定义提示信息', {
    timeout: 10000, //设置过期时间10秒
    headers: { token: '1231', responeType: 'text/html' } //配置其他请求头信息
  })
  .then((reslut) => {});

//下载后台返回的流文件(excel、pdf文件等)
this.http.post(url, param, true, { responseType: 'blob' }).then((content) => {
  const blob = new Blob([content]);
  const elink = document.createElement('a');
  elink.download = fileName;
  elink.style.display = 'none';
  elink.href = URL.createObjectURL(blob);
  document.body.appendChild(elink);
  elink.click();
  URL.revokeObjectURL(elink.href);
  document.body.removeChild(elink);
});

//this.http.get同上
//如果需要同步调用(注意需要将当前方法标识为async与C#用法基本类似):
await this.http.post(url, {}).then((x) => {});

//或者使用使用this.ajax做同步请求
this.http.ajax({
  url: url,
  json: true,
  param: {}, //请求参数
  success: (data) => {
    console.log(data);
  },
  type: 'post', //get
  async: false //是否异步请求,false为同步请求
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# http 请求 vue3 写法


<script>
    import {getCurrentInstance} from 'vue';
    //vue3语法使用http请求
    export default defineComponent({
          setup(props, context) {
                const { proxy } = getCurrentInstance();
                //调用proxy.http请求
                //其他操作与上面的vue2写一样,只是thi.http改为了proxy.http
                proxy.http.post(url,{},'提示信息').then(x=>{
                    proxy.$message.success('提示信息')
                });
                return { }
          }
    })

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 文件下载、下载pdf、下载excel

   //1、前端调用下载文件
   const url="api/表名/downloadTest";
   const params={}
   cosnt fileName='123.pdf'; //注意后台返回的什么格式文件,这里也要写成相同格式文件
   this.http.download(url, params, fileName, true, ()=>{}) 

    //2、后台接口返回方式一,直接返回磁盘文件
    [HttpPost, Route("downloadTest")]
    public IActionResult DownloadTest()
    {
        var path = "文件磁盘相对路径";// upload/xxx/123.pdf
        path = path.MapPath(); //转换为磁盘绝对(实际)路径
        path = path.MapPath(true); //如果文件放在了wwwroot下,MapPath参数传入true
        return File(
                System.IO.File.ReadAllBytes(path),
                System.Net.Mime.MediaTypeNames.Application.Octet,
                "123.pdf"
            );
    }

    //2-1、后台接口返回方式二,生成excel文件返回
    [HttpPost, Route("downloadTest")]
    public IActionResult DownloadTest()
    {
        //以字节形式返回文件给前端下载,如:在后台返回excel文件
        byte[] bytes = null;
        using (var package = new ExcelPackage())
        {
            var worksheet = package.Workbook.Worksheets.Add("Sheet1");
            // 保存Excel文件
            bytes= package.GetAsByteArray();
        }
        return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet,"123.xlsx" );
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34