【Vue】Axios、qs

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

npm安裝

npm install axios

使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js

import axios from 'axios'
Vue.prototype.$axios = axios

掛載到vue上在頁面中使用就可以this.$axios.get()

全局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';
axios.defaults.withCredentials = true// 跨域

攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求之前做些什么
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據做點什么
    return response;
  }, function (error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  });

擴展知識

http請求參數之Query String Parameters、Form Data、Payload

在與server端進行數據傳遞時，通常會用到GET、POST方法進行參數提交，而參數提交的方式，通常取決於server端對數據的接收方式。

Query String Parameters

當發起一次GET請求時，參數會以url string的形式進行傳遞。即?后的字符串則為其請求參數，並以&作為分隔符。

axios結合qs請求，如this.$axios.get('/log/selectEmqLogListByPage?' + qs.stringify(this.param))

// General
Request URL: http://foo.com?x=1&y=2
Request Method: GET

// Query String Parameters
x=1&y=2

Form Data

當發起一次POST請求時，若未指定content-type，則默認content-type為application/x-www-form-urlencoded。即參數會以Form Data的形式進行傳遞，不會顯式出現在請求url中。

 

// General
Request URL: http://foo.com
Request Method: POST

// Request Headers
content-type: application/x-www-form-urlencoded; charset=UTF-8

// Form Data
x=1&y=2

Payload

payload是一種以JSON格式進行數據傳輸的一種方式。content-type為application/json，則參數會以Request Payload的形式進行傳遞（顯然的，數據格式為JSON），不會顯式出現在請求url中。

// General
Request URL: http://foo.com
Request Method: POST

// Request Headers
content-type: application/json; charset=UTF-8

// Request Payload
x=1&y=2

同樣的，我們可以將payload形式的參數。通過 formData()來組裝。，且content-type需要設置為multipart/form-data。

// General
Request URL: http://foo.com
Request Method: POST

// Request Headers
content-type: multipart/form-data; charset=UTF-8

// Request Payload
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name="x"

1
------WebKitFormBoundaryAIpmgzV8Ohi99ImM
Content-Disposition: form-data; name="y"

2
------WebKitFormBoundaryAIpmgzV8Ohi99ImM--

其中，WebKitFormBoundaryAIpmgzV8Ohi99ImM為瀏覽器隨機生成的boundary，作為分隔參數，作用等同於&。　

axios使用列子

let formData = new FormData()
        formData.append('deviceType', this.updateParam.deviceType)
        formData.append('file', this.updateParam.file)
this.$axios.post('/firmware', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })　　

qs

npm install qs

import qs from 'qs'

參考文檔

並發請求暫未使用過

官方http://www.axios-js.com/zh-cn/docs/

擴展參考文檔

https://www.cnblogs.com/ChengWuyi/p/7117060.html

https://www.jianshu.com/p/c81ec1a547ad