3-2 axios基础介绍

Posted 2020-10-21 AlanTao

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节点，表示开发时依赖的包。

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;
            })
        }
    }
})