vue_resource和axios

Dus發表於2018-10-24
VueiOS

vue_resource和axios

1. 簡介

vue本身不支援傳送AJAX請求，需要使用vue-resource、axios等外掛實現
axios是一個基於Promise的HTTP請求客戶端，用來傳送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護

參考：GitHub上搜尋axios，檢視API文件

2. 使用axios傳送AJAX請求

2.1 安裝axios並引入

npm install axios -S
也可直接下載axios.min.js檔案

2.2 基本用法

axios([options])  
axios.get(url[,options]);
    傳參方式：
        1.通過url傳參
        2.通過params選項傳參
axios.post(url,data,[options]);
    axios預設傳送資料時，資料格式是Request Payload，並非我們常用的Form Data格式，
    所以引數必須要以鍵值對形式傳遞，不能以json形式傳參
    傳參方式：
        1.自己拼接為鍵值對
        2.使用transformRequest，在請求傳送前將請求資料進行轉換
        3.如果使用模組化開發，可以使用qs模組進行轉換

axios本身並不支援傳送跨域的請求，沒有提供相應的API，作者也暫沒計劃在axios新增支援傳送跨域請求，所以只能使用第三方庫

3. 使用vue-resource傳送跨域請求

3.1 安裝vue-resource並引入

cnpm install vue-resource -S

3.2 基本用法

使用this.$http傳送請求  
    this.$http.get(url, [options])
    this.$http.head(url, [options])
    this.$http.delete(url, [options])
    this.$http.jsonp(url, [options])
    this.$http.post(url, [body], [options])
    this.$http.put(url, [body], [options])
    this.$http.patch(url, [body], [options]) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>傳送AJAX請求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#itany',
                data:{
                    user:{
                        // name:'alice',
                        // age:19
                    },
                    uid:''
                },
                methods:{
                    send(){
                        axios({
                            method:'get',
                            url:'user.jsonaaa'
                        }).then(function(resp){
                            console.log(resp.data);
                        }).catch(resp => {
                            // console.log(resp);
                            console.log('請求失敗：'+resp.status+','+resp.statusText);
                        });
                    },
                    sendGet(){
                        // axios.get('server.php?name=tom&age=23')
                        axios.get('server.php',{
                            params:{
                                name:'alice',
                                age:19
                            }
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('請求失敗：'+err.status+','+err.statusText);
                        });
                    },
                    sendPost(){
                        // axios.post('server.php',{
                        //      name:'alice',
                        //      age:19
                        // })
                        // axios.post('server.php','name=alice&age=20&') //方式1
                        axios.post('server.php',this.user,{
                            transformRequest:[
                                function(data){
                                    let params='';
                                    for(let index in data){
                                        params+=index+'='+data[index]+'&';
                                    }
                                    return params;
                                }
                            ]
                        })
                        .then(resp => {
                            console.log(resp.data);
                        }).catch(err => {
                            console.log('請求失敗：'+err.status+','+err.statusText);
                        });
                    },
                    getUserById(uid){
                        axios.get(`https://api.github.com/users/${uid}`)
                        .then(resp => {
                            // console.log(resp.data);
                            this.user=resp.data;
                        });
                    },
                    sendJSONP(){
                        //https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
                        this.$http.jsonp('https://sug.so.360.cn/suggest',{
                            params:{
                                word:'a'
                            }
                        }).then(resp => {
                            console.log(resp.data.s);
                        });
                    },
                    sendJSONP2(){
                        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1420_21118_17001_21931_23632_22072&req=2&csor=1&cb=jQuery110208075694879886905_1498805938134&_=1498805938138
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                                wd:'a'
                            },
                            jsonp:'cb' //百度使用的jsonp引數名為cb，所以需要修改
                        }).then(resp => {
                            console.log(resp.data.s);
                        });
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <button @click="send">傳送AJAX請求</button>

        <button @click="sendGet">GET方式傳送AJAX請求</button>

        <button @click="sendPost">POST方式傳送AJAX請求</button>
        <hr>
        <br>

        GitHub ID： <input type="text" v-model="uid">
        <button @click="getUserById(uid)">獲取指定GitHub賬戶資訊並顯示</button>
        <br>
        姓名：{{user.name}} <br>
        頭像：<img :src="user.avatar_url" alt="">
        
        <hr>

        <button @click="sendJSONP">向360搜尋傳送JSONP請求</button>

        <button @click="sendJSONP2">向百度搜尋傳送JSONP請求</button>

    </div>
</body>
</html>

相關文章