axios的各种请求方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/vue_3.2.36_vue.global.js">script>
    <script src="js/axios_0.27.2_axios.js">script>
head>
<body>
<div id="app">
    <h1>网站列表h1>
    <ul>
        <li v-for="site in sites">{{ site.name }}li>
    ul>
    <img id="image" :src="image" alt="">
div>

<script>
    // 创建实例时设置默认的配置
    var instance = axios.create({
        baseURL: "https://www.baidu.com/api"
    })
    // 在实例创建后修改默认值
    instance.defaults.headers.common["Authorization"] = "123789"

    // 添加请求拦截器
    // 在发送请求之前做些什么
    instance.interceptors.request.use(function (config) {
        console.log("请求前执行了")
        return config
    })
    // 对响应数据做点什么
    instance.interceptors.response.use(function (resp) {
        console.log("对响应数据做了处理")
        return resp
    })

    const app = Vue.createApp({
        data() {
            return {
                sites: [],
                image: ""
            }
        },
        mounted() {
            // 直接url添加参数
            // axios.get("/info?idx=110")

            // 通过params添加参数
            /*
            axios.get("/info", {
                "params": {
                    "idx": 120
                }
            })
            */

            // post传参
            /*
            axios.post("/info", {
                "firstName": "My",
                "lastName": "YaNan"
            })
                .then((res) => {
                    this.sites = res.data.data.sites
                    console.log(res)
                })
                .catch(function (error) {
                    console.log(error)
                })
             */

            // 一次发送多个请求
            /*
            axios.all([this.getUserAccount(), this.getUserPermission()])
                .then(axios.spread(function (acct, perms) {
                    console.log(acct.data.data)
                    console.log(perms.data.data)
                }))
                .catch(function (error) {
                    console.log(error)
                })
            */

            // 可以通过向axios传递相关配置来创建请求
            // 001-请求图片
            /*
            axios({
                method: "post",
                url: "/img",
                responseType: "blob"
            })
                .then((response) => {
                    const imageBlob = new Blob([response.data], {type: response.headers['content-type']});
                    // 创建一个图片URL，用于显示图片
                    const imageUrl = URL.createObjectURL(imageBlob);
                    // 使用imageUrl来显示图片，例如将它设置为元素的src属性
                    this.image = imageUrl
                })
                .catch(function (err) {
                    console.log(err)
                })
             */

            // 使用cancel token取消请求
            var CancelToken = axios.CancelToken;
            var source = CancelToken.source();

            // 及简get请求
            instance.get("info", {
                cancelToken: source.token
            })
                .then((res) => {
                    console.log(res)
                })
                // 错误处理
                .catch(function (error) {
                    if (axios.isCancel(error)) {
                        console.log("request cancled", error.message)
                    }else if (error.response){
                        console.log("状态码不是2xx")
                        console.log(error.response.data)
                        console.log(error.response.status)
                        console.log(error.response.headers)
                    }else {
                        console.log(error.message)
                    }
                })

            // 取消请求（message 参数是可选的）
            source.cancel('Operation canceled by the user.')

        },
        methods: {
            getUserAccount: function () {
                return axios.get("/userAccount")
            },
            getUserPermission: function () {
                return axios.get("/userPermission")
            }
        }
    })
    const vm = app.mount("#app")
script>
body>
html>


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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

相关阅读:
如何解读Linux Kernel OOPS信息
 Vue+elementUI 导出word打印
 JVM探究
 计算机毕业设计之java+javaweb的大学运动场地管理系统
 【opencv】传统图像识别：hog+svm行人识别实战
 如何有效对直流列头柜进行监测
 一次GC暂停时间过长的排查与优化
 某电商网站的数据库设计（3）
敏捷开发模式下如何快速提升产品质量
 前端基础（四十六）：你不知道的JavaScript - 元编程 - 公开符号
原文地址：https://blog.csdn.net/weixin_42289273/article/details/133093044