天天看點
傳回

http用戶端axios

http用戶端axios

本教程為入門教程，如有錯誤，請各位前端大佬指出。

1.axiox簡介

jquery

時代，我們使用ajax向背景送出資料請求，

Vue

時代，

Axios

提供了前端對背景資料請求的各種方式。

而在

vue

中很多都是使用

axios

。

優缺點：

  • 從 node.js 建立 http 請求
  • 支援 Promise API
  • 用戶端支援防止CSRF
  • 提供了一些并發請求的接口（重要，友善了很多的操作）

2.axios的跨域

由于前後端的端口号不同，那麼會又跨域的問題。而解決跨域有很多總方法，比如使用背景配置或者nginx，以下是我做過的demo。

1.nginx配置跨域

1. #user  nobody;
2. worker_processes  1;
3. 
4. #error_log  logs/error.log;
5. #error_log  logs/error.log  notice;
6. #error_log  logs/error.log  info;
7. 
8. #pid        logs/nginx.pid;
9. daemon off;
10. events {
11.     worker_connections  65535;
12.     multi_accept on;
13. }
14. 
15. http {
16.     include       mime.types;
17.     default_type  application/octet-stream;
18. 
19. #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20. #                  '$status $body_bytes_sent "$http_referer" '
21. #                  '"$http_user_agent" "$http_x_forwarded_for"';
22. 
23. #access_log  logs/access.log  main;
24. 
25.     sendfile        on;
26.     tcp_nopush     on;
27.     tcp_nodelay     on;
28. 
29. #keepalive_timeout  0;
30.     keepalive_timeout  65;
31. 
32.     server {
33.            listen 8080;
34.            server_name localhost;
35.            ##  = /表示精确比對路徑為/的url，真實通路為http://localhost:8088
36.            location = / {
37.                proxy_pass http://localhost:8088;
38.            }
39.            ##  /no 表示以/no開頭的url，包括/no1,no/son，或者no/son/grandson
40.            ##  真實通路為http://localhost:5500/no開頭的url
41.            ##  若 proxy_pass最後為/ 如http://localhost:3000/;比對/no/son，則真實比對為http://localhost:3000/son
42.            location /no {
43.                proxy_pass http://localhost:8088;
44.            }
45.            ##  /ok/表示精确比對以ok開頭的url，/ok2是比對不到的，/ok/son則可以
46.            location /Demo/testDemoTranNew {
47.                proxy_pass http://localhost:8088;
48.    }           
49.     }
50. }
51. 複制代碼

2.axios配置跨域

同時在axios中也可以配置跨域，方式如下：

1.修改config/index.js檔案

//增加跨域
        proxyTable: {
            "/api": {
                //目标位址
                target: "http://localhost:8088",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
複制代碼

2.main.js中增加變量

1. //跨域處理  相當于把index中的api位址拿過來
2. Vue.prototype.HOST = '/api'
3. 複制代碼
直接調用就可以了，完全避免了跨域！

3.axios的get請求

在使用時

main.js

需要導入axios元件。具體方式請參考下文。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
複制代碼

中的get請求.有兩種寫發，以下附上兩種寫法的格式。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
export default {
name: 'HelloWorld',
data () {
  return {
    content:"元件1",
    data:{}
    }
},
methods:{
 
},
created() {
  //第一種
  // this.$axios.get("https://api.apiopen.top/searchMusic",{
  //   params:{
  //      name:"雅俗共賞"
  //   }
  // }
  // )
  // .then(res => {
  //     console.log(res)
  //     this.data = res.data
  // })
  // .catch(error => {
  //     console.log(error)
  // })
 
  // 第二種
  this.$axios({
    method: 'get',
    url: 'https://api.apiopen.top/searchMusic',
    params: {
        name:"雅俗共賞"
    }
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  })
  ;
}
}
</script>
複制代碼

4. 的post請求

在調用中也有兩種寫法，需要注意的是，需要使用qs去格式化參數，因為需要把對象轉換成json格式。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
import qs from "qs"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"元件1",
    data:{}
    }
},
methods:{
 
},
created() {
  //axios的post請求接收的參數是 form-data格式 ----   name = xiaobao 需要使用qs
  // this.$axios.post("https://api.it120.cc/common/mobile-segment/next",qs.stringify(
  //     {
  //   segment: 0
  //      }
  // )
  // )
  // .then(res => {
  //     console.log(res)
  //     this.data = res.data
  // })
  // .catch(error => {
  //     console.log(error)
  // })
 
 
   //這種寫法需要transformRequest來轉換格式 否則會報錯 因為接受的是string類型參數 //但是不加stringify會直接變成對象傳過去
   // 發送 POST 請求
  this.$axios({
    method: 'post',
    url: 'https://api.it120.cc/common/mobile-segment/next',
    data: {
         segment: 0
    },
    transformRequest: [function (data) {
    // 對 data 進行任意轉換處理
    return qs.stringify(data);
  }]
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  });
}
}
</script>
複制代碼

5.url的全局配置

因為如果調用的api字首相同，那麼可以使用全局配置，将url配成全局，避免多次書寫。

這裡需要時對

main.js

配置，以下附上代碼。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
複制代碼

調用時，url就可以省略baseURL中配置的

6.攔截器

在axios發送前和接受前，先執行攔截器(類似java攔截器)，這裡需要在

main.js

中加入配置。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
import qs from 'qs'
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
axios.defaults.baseURL = 'https://api.it120.cc';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
// 添加請求攔截器
axios.interceptors.request.use(function(config) {
    // 在發送請求之前做些什麼
    console.log(config)
    if (config.method === "post") {
        config.data = qs.stringify(config.data);
    }
    return config;
}, function(error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});
 
// 添加響應攔截器
axios.interceptors.response.use(function(response) {
    console.log(response)
    if (response.status !== 200) {
        return;
    }
    // 對響應資料做點什麼
    return response;
}, function(error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
});
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
複制代碼

這樣的話，在接下來的使用中我們攔截了qs方法，在之後的使用中就不必每一個請求都調用qs方法了。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
import qs from "qs"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"元件1",
    data:{}
    }
},
methods:{
 
},
created() {
  // 發送 POST 請求
  this.$axios({
    method: 'post',
    url: '/common/mobile-segment/next',
    data: {
         segment: 0
    }
    
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  });
}
}
</script>
複制代碼

7.前端測試方法

在測試前端時有幾種擷取資料方法

  • 1.mock 請求自己的json格式 缺點：無法post請求
  • 2.自己搭建伺服器 擷取資料
  • 3.使用線上已經存在的資料 缺點：線上必須存在資料
注意！操作dom節點時，避免操作原生dom 如： 
<template>
<div>
      {{data}}
      <p ref = "myp">aaa</p>
</div>
</template>
 
<script>
import $ from "jquery"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"元件1",
    data:{}
    }
},
methods:{
 
},
mounted() {
  //使用原生操作dom
  console.log(this.$refs.myp.innerHTML = "BBB")
  //console.log(this.$refs.myp.style.color = "red")
  var myo2 = this.$refs.myp
  myo2.addEventListener("click",function(){
    console.log("666")
  })
  //使用jquery操作dom
  $(myo2).css("color","YELLOW");
 
}
}
</script>
json javascript 前端開發 java 應用服務中間件 api nginx 資料格式 http聲明式用戶端 http申請 公網http 用戶端http spdy http源代碼
上一篇: SAP Fiori應用沒能從Fiori Launchpad啟動的一個可能原因及分析過程
下一篇: SAP UI5 formatter的工作原理

繼續閱讀