3-2 axios基础介绍

Axios使用详解

最新推荐文章于 2025-09-10 20:18:23 发布

天为我蓝

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/alantao/p/8329037.html

本文介绍了Axios库的安装与使用方法，包括静态引用、npm安装、API调用、响应信息处理及请求拦截等内容，并提供了Vue实例中的应用示例。

1.静态引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.npm方式安装(推荐)

$ npm install axios --save
-save     ==> 是指将包信息添加到 package.json 里的 dependencies节点，表示发布时依赖的包。
-save-dev ==> 是指将包信息添加到 package.json 里的 devDependencies节点，表示开发时依赖的包。

调用

import axios from 'axios';

3.八种API (详细介绍 : https://www.npmjs.com/package/axios

1.axios.request(config)
2.axios.get(url[, config])
3.axios.delete(url[, config])
4.axios.head(url[, config])
5.axios.options(url[, config])
6.axios.post(url[, data[, config]])
7.axios.put(url[, data[, config]])
8.axios.patch(url[, data[, config]])

4.接收响应信息

axios.get('/user/12345').then(function(response) {
    console.log(response.data);         // 响应数据
    console.log(response.status);       // 状态码
    console.log(response.statusText);   // 服务器的响应的HTTP状态信息
    console.log(response.headers);      // 响应头
    console.log(response.config);       // 提供给`axios`该请求的配置
});

5.多个接口一起调用

function getUserAccount() {
    return axios.get('/user/12345');
}
 
function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {
    // Both requests are now complete
}));

二.常见的请求

new Vue({
    // 全局拦截
    mounted: function(){
        // 请求前
        axios.interceptors.request.use(config => {
            console.log("request 请求前");
            return config;
        })

        // 拦截响应的请求
        axios.interceptors.response.use(response => {
            console.log("request 响应的请求前")
            return response;
        })
    },
    methods: {
        // get请求
        get: function(){
            axios.get("package.json", {
                params: {
                    userId: "999"
                },
                headers: {
                    token: "Alan"
                }
            }).then(res => {
                this.msg = res.data;
            }).catch(error => {         // catch是捕获异常
                this.msg = "error" + error;
            })
        },
        // post请求
        post: function(){
            axios.post("package.json", {
                // 参数
                userId: "888"
            },{
                headers: {
                    token: "Alanpost"
                }
            }).then(res => {
                this.msg = res.data;
            }).catch(error => {         // catch是捕获异常
                this.msg = "error" + error;
            })
        },

        // axios底层配置
        http: function(){
            axios({
                url:"package.json",
                method: "get",
                // post参数
                data: {
                    urseId: "101"
                },
                // get参数
                params: {
                    userId: "102",
                },
                headers: {
                    token: "http"
                }
            }).then(res => {
                this.msg = res.data;
            })
        }
    }
})

转载于:https://www.cnblogs.com/alantao/p/8329037.html