vue_resource和axios

時間 2019-11-08

標籤 vue resource axios 简体版

原文原文鏈接

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>

1. vue_resource 使用說明
2. axios和promise
3. XHR、Fetch和axios
4. Axios和(async,await)
5. axios和vuex
6. axios 和 PromiseA+
7. Vue-resource和Axios對比以及Vue-axios
8. axios，Ajax,jQuery ajax,axios和fetch的區別
9. axios和vue-axios區別及vue-axios使用
10. 介紹axios和promise
更多相關文章...
• XLink 和 XPointer 語法 - XLink 和 XPointer 教程
• Kotlin 類和對象 - Kotlin 教程
• IntelliJ IDEA 代碼格式化配置和快捷鍵
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

axios

vue2.0+axios+mock+axios

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。