Vue中傳送HTTP請求

阿新 • • 發佈：2020-08-10

Vue中傳送HTTP請求

HTTP庫：

vue-resource：https://github.com/pagekit/vue-resource

axios：http://www.axios-js.com/

前言

設定請求的根目錄

前言

Vue中並沒有直接提供對HTTP請求模組的封裝，而是以使用一個單獨的外掛去封裝了HTTP的模組，vue-resource是vue提供的一個外掛，除此之外你還可以使用其它的外掛比如axios。

<script src="../lib/vue-2.4.0.js"></script>

    <!-- vue-resource依賴於vue,它只是在Vue的this上擴充套件了$http-->
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>

<body>
<div id="app">
    <input type="button" value="get請求" @click="getInfo">
    <input type="button" value="post請求" @click="postInfo">
    <input type="button" value="jsonp請求" @click="jsonpInfo">
</div>

<script>
    var 
 vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getInfo() {
                //  這裡如果使用webstrom啟動訪問會報錯，因為這是跨源訪問，所以
                // 按理說應該是在源網站上訪問該頁面
                this.$http.get('http://vue.studyit.io/api/getlunbo')
                    .then((success) => {
                        console.log(success);
                    }, (error)  
=> {
                        console.log(error);
                    })
            },
            postInfo() { // 發起 post 請求   application/x-wwww-form-urlencoded
                //  手動發起的 Post 請求，預設沒有表單格式，所以，有的伺服器處理不了
                //  通過 post 方法的第三個引數， { emulateJSON: true } 設定 提交的內容型別 為 普通表單資料格式
                this 
.$http.post('http://vue.studyit.io/api/post', {}, {})
                    .then(success => {
                        console.log(success);
                    }) // error可以省略
            },
            jsonpInfo() {
                this.$http.jsonp('http://vue.studyit.io/api/jsonp')
                    .then(result => {
                        console.log(result);
                    })
            }
        }
    })
</script>

設定請求的根目錄

在vue-resource的文件裡有Configuration項，在其中有說明。

// main.js中

// http請求
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 設定全域性http請求根路徑[最後不帶/，在請求時之前也不能帶/]
Vue.http.options.root = 'http://vue.studyit.io';

Vue中傳送HTTP請求

Vue中傳送HTTP請求 HTTP庫： vue-resource：https://github.com/pagekit/vue-resource axios：http://www.axios-js.com/

詳解golang中傳送http請求的幾種常見情況

方式一使用http.Newrequest 先生成http.client -> 再生成 http.request -> 之後提交請求：client.Do(request) -> 處理返回結果，每一步的過程都可以設定一些具體的引數，下面是一個最樸素最基本的例子：

vue實戰——vue中傳送AJAX請求

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

vue中同一個方法中傳送axios請求獲取引數值不同

toUpdateCar() { if (this.checked.length != 1) { alert(\"只能選擇一項資訊進行修改！\") $(\"#update\").attr(\"data-toggle\", \"\");

傳送http請求(1):傳送http請求的幾種方式

推薦閱讀： SpringCloud原始碼閱讀0-SpringCloud必備知識 SpringCloud原始碼閱讀1-EurekaServer原始碼的祕密

如何基於Python + requests實現傳送HTTP請求

這篇文章主要介紹瞭如何基於Python + requests實現傳送HTTP請求,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

VUE中使用HTTP庫Axios方法詳解

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中安裝Axios模組在Vue中使用，最好安裝兩個模組axios 和vue-axios

Golang 傳送http請求時設定header的實現

某天，在需要抓取某個網頁資訊的時候，需要在header中增加一些資訊，於是搜尋了一下，如何在golang發起的http請求中設定header。

解決Python傳送Http請求時,中文亂碼的問題

解決方法：先encode再quote。原理： msg.encode(\'utf-8\')是解決中文亂碼問題。 quote()：假如URL的 name 或者 value 值中有『&』、『%』或者『=』等符號，就會有問題。所以URL中的引數字串也需要把『&=』

PHP利用curl傳送HTTP請求的例項程式碼

cURL 函式概述 PHP支援的由Daniel Stenberg建立的libcurl庫允許你與各種的伺服器使用各種型別的協議進行連線和通訊。

Java傳送Http請求（轉）

原文地址：Java傳送Http請求 1、方法一，通過apache的httpclient import java.util.ArrayList;

nodejs使用request傳送http請求

在nodejs的開發中，有時需要後臺去呼叫其他伺服器的介面，這個時候，就需要傳送HTTP請求了。有一個簡單的工具可以用，Simplified HTTP request client，可以比較方便的模擬請求。

JAVA傳送HTTP請求方式

1. HttpURLConnection 使用JDK原生提供的net，無需其他jar包； HttpURLConnection是URLConnection的子類，提供更多的方法，使用更方便。

【python介面自動化】- 使用requests庫傳送http請求

前言：什麼是Requests ？Requests 是⽤Python語⾔編寫，基於urllib，採⽤Apache2 Licensed開源協議的 HTTP 庫。它⽐ urllib 更加⽅便，可以節約我們⼤量的⼯作，完全滿⾜HTTP測試需求。

nodejs.cn-Node.js-入門教程：使用 Node.js 傳送 HTTP 請求

ylbtech-nodejs.cn-Node.js-入門教程：使用 Node.js 傳送 HTTP 請求 1.返回頂部 1、使用 Node.js 傳送 HTTP 請求

JS_0029：JS用 XMLHttpRequest 傳送http請求

1， httpPost(image) { return new Promise((resolve, reject) => { const http = new XMLHttpRequest(); http.onload = () => {

go:使用HttpRequest傳送Http請求

原生的是用net/http傳送請求，HttpRequest使這個操作簡化了。 1.傳送post請求，傳參為json，見code：

Vue中 axios delete請求引數操作

vue中axios 的delete和post,put在傳值上有點區別 post和put有三個引數，url,data和config，所以在使用這兩個時，可以寫成axios.post(api,{id:1}),axios.put(api,但是delete只有兩個引數：url和config，data在config中

import com.alibaba.fastjson.JSONObject;import org.apache.commons.httpclient.*;import org.apache.commons.httpclient.methods.GetMethod;import org.apache.commons.httpclient.methods.PostMethod;import org.

Java 傳送http請求（get、post）的示例

1.情景展示　　java傳送get請求、post請求（form表單、json資料）至另一伺服器；

Vue中傳送HTTP請求

相關推薦