前端面試題，axios詳解

今天，我們從如何使用axios以及axios的概念，這兩方面來仔細聊聊axios。

1、安裝使用axios

npm安裝

 npm install axios --save

通過cdn引入

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

新建http.js，封裝好axios的get，post請求

import Axios from 'axios'
import ElementUI from 'element-ui' 
const get = (url, params, config) => {
  // url爲我們接口的地址
  url = '/api/' + url //本地開發環境
  return new Promise((resolve, reject) => {
    Axios.get(url, params, config)
      .then(res => {
        resolve(res.data)
        if (res.data.code && res.data.code != 0) {
          ElementUI.Message.error(res.data.message || res.message || '系統錯誤')
        }
      })
      .catch(err => {
        reject(err)                 
      })
  })
}
const post = (url, params, config) => {
  // url爲我們接口的地址
  url = '/api/' + url //本地開發環境 
  return new Promise((resolve, reject) => {
    Axios.post(url, params, config)
      .then(res => {
        resolve(res.data)
        if (res.data.code && res.data.code != 0) {
          ElementUI.Message.error(res.data.message || res.message || '系統錯誤')
        }
      })
      .catch(err => {
        reject(err)          
      })
  })
}
export default {
  get,
  post
}

新建請求攔截AxiosPlugin.js，封裝好請求攔截器

import axios from 'axios'
import router from '../router.js'

// 創建 axios 實例
export const Axios = axios.create({
  timeout: 15000
})

window.cancelInterface = []
//POST傳參序列化(添加請求攔截器)
// 在發送請求之前做某件事
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      if (!window.cancelInterface) {
        window.cancelInterface = []
      }
      window.cancelInterface.push({
        cancel
      })
    })
    // console.log('config.token', config)
    if (config.token != 'none') {
      if (localStorage.token) {
        config.headers.Authorization = 'Bearer ' + localStorage.token
      }
    }

    return config
  },
  error => { 
    return Promise.reject(error)
  }
)

//返回狀態判斷(添加響應攔截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(
  res => {
    if (res.data.code == '401') {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    //503跳轉到錯誤頁
    if (res.data.code == '503') {
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    return res
  },
  error => {
    if (error.response.status === 401 || error.response.status === 403) {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 503 ) {
      //503跳轉到錯誤頁
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 500) {
      // 服務器錯誤
      return Promise.reject(error.response.data)
    } 
    // 返回 response 裏的錯誤信息
    return Promise.reject(error.response.data)
  }
)
// 將 Axios 實例添加到Vue的原型對象上
export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$http', {
      value: Axios
    })
  }
}

2、axios是什麼？

1. Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。前端最流行的 ajax 請求庫，
2. react/vue 官方都推薦使用 axios 發 ajax 請求

3、axios的特點？

1. 基於 promise 的異步 ajax 請求庫，支持promise所有的API
2. 瀏覽器端/node 端都可以使用，瀏覽器中創建XMLHttpRequests
3. 支持請求／響應攔截器
4. 支持請求取消
5. 可以轉換請求數據和響應數據，並對響應回來的內容自動轉換成 JSON類型的數據
6. 批量發送多個請求
7. 安全性更高，客戶端支持防禦 XSRF，就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就可以輕鬆辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而採取正確的策略。

4、axios常用語法有哪些？

axios(config): 通用/最本質的發任意類型請求的方式
axios(url[, config]): 可以只指定 url 發 get 請求
axios.request(config): 等同於 axios(config)
axios.get(url[, config]): 發 get 請求
axios.delete(url[, config]): 發 delete 請求
axios.post(url[, data, config]): 發 post 請求
axios.put(url[, data, config]): 發 put 請求
axios.defaults.xxx: 請求的默認全局配置
axios.interceptors.request.use(): 添加請求攔截器
axios.interceptors.response.use(): 添加響應攔截器
axios.create([config]): 創建一個新的 axios(它沒有下面的功能)
axios.Cancel(): 用於創建取消請求的錯誤對象
axios.CancelToken(): 用於創建取消請求的 token 對象
axios.isCancel(): 是否是一個取消請求的錯誤
axios.all(promises): 用於批量執行多個異步請求
axios.spread(): 用來指定接收所有成功數據的回調函數的方法

5、axios爲什麼既能在瀏覽器環境運行又能在服務器(node)環境運行？

axios在瀏覽器端使用XMLHttpRequest對象發送ajax請求；在node環境使用http對象發送ajax請求。

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
	var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
    	// 瀏覽器環境
        adapter = require('./adapter/xhr');
    } else if (typeof process !== 'undefined') {
    	// node環境
        adapter = require('./adapter/http');
    }
   return adapter;
}

上面幾行代碼，可以看出：XMLHttpRequest 是一個 API，它爲客戶端提供了在客戶端和服務器之間傳輸數據的功能；process 對象是一個 global （全局變量），提供有關信息，控制當前 Node.js 進程。原來作者是通過判斷XMLHttpRequest和process這兩個全局變量來判斷程序的運行環境的，從而在不同的環境提供不同的http請求模塊，實現客戶端和服務端程序的兼容。

6、爲何要用axios不用原生ajax？

因爲ajax相對於axios有以下幾個缺點：
1、本身是針對MVC的編程,不符合現在前端MVVM的浪潮
2、基於原生的XHR開發，XHR本身的架構不清晰。
3、JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（採取個性化打包的方案又不能享受CDN服務）
4、不符合關注分離（Separation of Concerns）的原則
5、配置和調用方式非常混亂，而且基於事件的異步模型不友好。