# 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
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
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
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