1.1 為什麼選擇axios?

axios 是一個基於 promise 的 HTTP庫網路請求外掛.

基本特點

• 可以用在瀏覽器(測試網站：httpbin.org/)和 node.js中
• 支援 Promise API。
• 自動轉換 JSON 資料。
• 客戶端支援防禦 XSRF。

建立專案：vue init webpack axiostest，終端安裝外掛:cnpm install axios --save

1.2 axios基本使用

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>
 

main.js

import Vue from 'vue'
import App from './App'
// 匯入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})
// 1.基本使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'get'
}).then(res => {
  console.log(res)
})

axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 專門用來對get請求引數的拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})
 

執行結果

1.3 axios傳送併發請求

使用axios.all可以放入多個請求的陣列，axios.all([ ]) 返回的結果是一個數組。

main.js

import Vue from 'vue'
import App from './App'
// 匯入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})
// 1.axios傳送併發請求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(results => {
  console.log(results);
})
 

執行結果

使用 axios.spread 可將陣列 [res1,res2] 展開為 res1, res2。

main.js

import Vue from 'vue'
import App from './App'
// 匯入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 2.axios傳送併發請求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(axios.spread((res1, res2) =>{
  console.log(res1);
  console.log(res2);
}))

執行結果

1.4 axios的例項

為什麼要建立axios的例項呢?

• 當從axios模組中匯入物件時, 使用的例項是預設的例項。
• 當給該例項設定一些預設配置時, 這些配置就被固定下來了。
• 但是後續開發中, 某些配置可能會不太一樣，比如某些請求需要使用特定的baseURL或者timeout或者content-Type等。
• 這個時候, 就可以建立新的例項, 並且傳入屬於該例項的配置資訊。

import Vue from 'vue'
import App from './App'
// 匯入axios
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 4.建立對應的axios例項
  const instance1 = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  instance1({
    url: '/home/multidata'
  }).then(res => {
    console.log(res);
  })
  instance1({
    url: '/home/data',
    params:{
      type: 'pop',
      page: 1
    }
  }).then(res => {
    console.log(res);
  })

  const instance2 = axios.create({
    baseURL: 'http://222.111.33.33:8000',
    timeout: 10000,
    headers: {}
})

1.5 axios封裝

方式一(回撥函式)

request.js

// 匯入axios
import axios from 'axios'

export function request(config, success, failure){
  // 1.建立axios的例項
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 傳送真正的網路請求
  instance(config)
      .then(res =>{
        success(res)
      })
      .catch(err =>{
        failure(err)
    })
}

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})
//1.封裝request模組
import {request} from "./network/request";

request({
  url: '/home/multidata'
}, res =>{
  console.log(res);
}, err =>{
  console.log(err);
})

執行結果

方式二(Promise函式)

request.js

// 匯入axios
import axios from 'axios'

export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.建立axios的例項
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    // 傳送真正的網路請求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 5.封裝request模組
import {request} from "./network/request";

request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

最終方案

request.js

// 匯入axios
import axios from 'axios'

export function request(config) {
  // 1.建立axios的例項
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 2.傳送真正的網路請求
  return instance(config)
}

1.6 如何使用攔截器？

axios提供了攔截器，用於我們在傳送每次請求或者得到相應後，進行對應的處理。

響應的成功攔截中，主要是對資料進行過濾。

程式碼示例

request.js

// 匯入axios
import axios from 'axios'

export function request(config) {
  // 1.建立axios的例項
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios攔截器(請求攔截)
  instance.interceptors.request.use(config => {
    /*
    1.比如config中的一些資訊不符合伺服器的要求
    2.比如每次傳送網路請求時, 都希望在介面中顯示一個請求的圖示
    3.某些網路請求(比如登入(token)), 必須攜帶一些特殊的資訊
    */
    return config
  }, err => {
    console.log(err);
  })

  // 2.1 響應攔截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.傳送真正的網路請求
  return instance(config)
}

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 封裝request模組
import {request} from "./network/request";

request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

執行結果