一篇搞定vue請求和跨域

時間 2019-11-19

標籤一篇搞定 vue 求和简体版

原文原文鏈接

　　vue自己不支持發送AJAX請求，須要使用vue-resource、axios等插件實現php

　　axios是一個基本Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時再也不對vue-resource進行更新和維護css

axios發送AJAX請求

　　安裝axios

npm install axios -S

　　基本用法

axios([options])
axios.get(url[,options]) 傳參方式：1.經過url 傳參 2.經過params選項傳參
axios.post(url,data,[options]) axios默認發送數據時，數據格式是Request Payload（也就是對象傳入，後臺接收json數據），並不是咱們經常使用的Form Data格式（字符串拼接參數的形式傳入），因此參數必需要以鍵值對形式傳遞，不能以json形式傳參，傳參方式：

本身拼接爲鍵值對
使用transformRequest，在請求發送前將請求數據進行轉換
若是使用模塊化開發，可使用qs模塊進行轉換

<!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>

　　另外axios不是全局組件，須要使用時，在每一個文件都要引入，若是想達到全局效果，能夠在main.js用原型進行綁定Vue.prototype.$http=axioshtml

Proxy代理

　　對於先後端分離模式下，前端請求後端存在跨域問題，除了後端主動設置容許跨域請求的類型，前端也可以使用proxy代理來轉發請求實現跨域前端

　　項目準備

vue init webpack proxy-demovue
cd proxy-demopython
npm installwebpack
npm install axios -Sios
npm run devgit

　　在下面文件下的proxyTable配置代理github

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
    dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/flask-api': {//前端路由匹配模式
                target: 'http://localhost:9001',  //後端請求服務域名和端口
                changeOrigin: true,   //設置請求頭
                pathRewrite: {
                    '^/flask-api': '/'   //路徑重寫  前端/flask-api 對應 後端/
                },
            }
        },

        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: true,  //運行npm run dev 打開瀏覽器
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


        /**
         * Source Maps
         */

        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'cheap-module-eval-source-map',

        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,

        cssSourceMap: true
    },

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',

        /**
         * Source Maps
         */

        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],

        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }
}

　　就拿login舉例，前端localhost:8080/flask-api/login --> 後端http://localhost:9001/login，而在用axios發送請求時，不用寫localhost:8080,直接寫/flask-api/login就能夠了

<script>
import axios from "axios";

export default {
  name: "App",
  mounted() {
    axios
      .get("/flask-api/task/get")
      .then(resp => {
        console.log(resp.data);
      })
      .catch(err => {
        console.log("request fail");
      });
  },
  methods: {
    send() {
      axios
        .post("/flask-api/task/get", { "hello": "hello" })
        .then(resp => {
          console.log('sucees')
          // this.$message.success("success");
        })
        .catch(err => {
          console.log(err);
          console.log(err.status);
          console.log(err.statusText);
          console.log("request fail");
        });
    }
  }
};
</script>

其餘

　axios自己並不支持發送跨域請求，須要使用vue-resource發送跨域請求

　　安裝

npm install vue-resource -S

　　基本用法

　　使用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])

相關標籤/搜索

每日一句

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