3-2 axios基礎介紹

標籤：rms   fun   多個   開發   sha   靜態   api   use   pre   

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

 

3-2 axios基礎介紹