axios（阿克曉奧絲，愛可信）

axios：基於promise封裝的ajax庫，基於這個類庫傳送ajax請求，預設就是基於promise管理的
核心還是XMLHttpRequest
官網

axios.get/head/delete/options/post/put/patch 傳送對應類別請求的方法

GET系列：axios.get([url],[config]) 請求URL地址、配置項
POST系列：axios.post([url],[data],[config]) 請求URL地址、請求主體資訊、配置項
配置項：
[object]都是plain object純粹物件

• params:[string/object] 基於問號引數方案，需要傳遞給伺服器的資訊，如果傳遞的是個物件，axios內部會把物件變為 xxx=xxx&xxx=xxx 這樣的字串，然後基於問號引數傳遞給伺服器；如果寫的是一個字串，則變為 0=字串 的方式傳遞給伺服器；我們一般都使用物件的方式!!

• headers:[object] 設定請求頭資訊，例如：headers:{ 'Content-Type': 'application/x-www-form-urlencoded' } 設定客戶端傳遞給伺服器的內容格式是urlencoded格式

• timeout:[number] 設定超時時間 寫零是不設定，單位是MS

• withCredentials:[boolean] 跨域請求中是否允許攜帶資源憑證 預設是false

• responseType:[string] 把伺服器返回的結果轉換為對應的資料格式 預設是json「伺服器返回的結果，我們都把其變為JSON格式的物件」、'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

• onUploadProgress:[function] 監聽檔案上傳的進度

• baseURL:[string] 請求地址的公共字首

• transformRequest:[function] POST系列請求，對請求主體的資料進行格式化處理

• validateStatus:[function] 預設伺服器返回的HTTP狀態碼是多少才算請求成功，預設是以2開始的算成功

基於axios傳送的請求，返回結果都是promise例項

• 資料請求成功會讓promise狀態為成功，promise值就是從伺服器獲取的結果
• 資料請求失敗會讓promise狀態為失敗
  • 伺服器有響應資訊，但是狀態碼不是以2開始的：reason物件中有response屬性，儲存伺服器返回的資訊
  • 請求超時或者被中斷 code:"ECONNABORTED" response:undefined
  • 斷網了 navigator.onLine=false

axios.get('http://127.0.0.1:9999/user/list', {
  timeout: 1,
  params: {
    departmentId: 0,
    search: ''
  }
}).then(response => {
  console.log('請求成功：', response);
  // response物件
  //   + status/statusText HTTP狀態碼及其描述
  //   + request 原生的XHR物件
  //   + headers 儲存響應頭資訊（物件）
  //   + config 儲存傳送請求時候的相關配置項
  //   + data 儲存響應主體資訊
  return response.data;
}).then(value => {
  console.log('響應主體資訊：', value);
}).catch(reason => {
  console.log('請求失敗：');
  console.dir(reason);
});

AXIOS處理POST系列請求：

@1 我們DATA(請求主體)寫的是一個物件，內部預設處理成為JSON格式的字串，然後傳遞給伺服器「因為：用AJAX基於請求主體傳遞給伺服器的內容格式有限制 字串{URLENCODED格式、JSON格式、普通...}、ArrayBuffer、Blob、FormData格式物件」

@2 如果伺服器要求傳遞的格式不是JSON字串，我們可以給DATA設定值是自己想要的字串格式
如果要求傳遞的是 urlencoded 格式字串，我們可以基於 Qs.stringify/parse 進行處理「引入QS庫」

有一個配置項專門是用來處理POST請求，請求主體的資料格式的：transformRequest

• data傳遞的依然是個物件格式「常用寫法」
• transformRequest:(data,headers)=>{ return xxx; }

AXIOS內部做了一個非常有用的事情：根據我們傳遞給伺服器的內容格式，自動幫我們設定請求頭中的 Content-Type ,讓其和傳遞的格式相匹配「MIME型別」
urlencoded格式字串 Content-Type:'application/x-www-form-urlencoded'
json格式字串 Content-Type:'application/json'
FormData格式物件 Content-Type:'multipart/form-data'
...

const qs = require('querystring');

// 驗證是否為純粹的物件
const isPlainObject = function isPlainObject(obj) {
  let proto, Ctor;
  if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false;
  proto = Object.getPrototypeOf(obj);
  if (!proto) return true;
  Ctor = proto.hasOwnProperty('constructor') && proto.constructor;
  return typeof Ctor === "function" && Ctor === Object;
};

axios.post('http://127.0.0.1:9999/user/login', {
  account: '18310612838',
  password: md5('1234567890')
}, {
  transformRequest: data => {
    // data:我們傳遞的這個物件
    // return什麼值，就是把其基於請求主體專遞給伺服器
    if (isPlainObject(data)) return qs.stringify(data);
    return data;
  }
}).then(response => {
  return response.data;
}).then(value => {
  console.log('請求成功', value);
}).catch(reason => {
  // 根據不同的情況做不同提示
});

專案中對 axios 的封裝使用

Axios的二次配置：把多個請求之間公共的部分進行提取，後期在業務中再次傳送資料請求，公共部分無需再次編寫

• axios.defaults.xxx
• axios.interceptors.request/response 請求/響應攔截器

// 驗證是否為純粹的物件
const isPlainObject = function isPlainObject(obj) {
    let proto, Ctor;
    if (!obj || Object.prototype.toString.call(obj) !== "[object Object]") return false;
    proto = Object.getPrototypeOf(obj);
    if (!proto) return true;
    Ctor = proto.hasOwnProperty('constructor') && proto.constructor;
    return typeof Ctor === "function" && Ctor === Object;
};

// 請求地址的公共字首：這樣後期再發請求的時候，URL地址中公共字首部分就不需要寫了
//   原理：請求URL地址不含“http(s)://”，傳送請求的時候會把baseURL拼上去，然後再發請求；如果自己的URL包含了“http(s)://”這個部分，則以自己的為主，就不在去拼接baseURL了；
axios.defaults.baseURL = 'http://127.0.0.1:9999';

// 根據當前伺服器的要求，對於POST系列請求，請求主體傳遞給伺服器的格式都是：urlencoded格式字串
axios.defaults.transformRequest = data => {
    if (isPlainObject(data)) return Qs.stringify(data);
    return data;
};

// 其它可提取的公共配置部分
axios.defaults.timeout = 60000;
axios.defaults.withCredentials = true;
axios.defaults.validateStatus = status => {
    // 校驗伺服器返回狀態碼為多少才算請求成功：預設以2開始才算
    return status >= 200 && status < 400;
};

// 基於攔截器進行公共部分提取
//   + 請求攔截器：發生在 “配置項準備完畢” 和 “傳送請求” 之間
//   + 響應攔截器：發生在 “伺服器返回結果” 和 “業務程式碼自己處理 .then” 之間
axios.interceptors.request.use(config => {
    // config物件包含的就是準備好的配置項，最後返回啥配置，就按照這些配置發請求
    return config;
});

axios.interceptors.response.use(response => {
    // 請求成功:把響應主體資訊返回給業務層去使用
    return response.data;
}, reason => {
    // 請求失敗:根據不同的失敗原因做不同的提示
    if (reason && reason.response) {
        // @1 有返回結果，只不過狀態碼不對
        let {
            status
        } = reason.response;
        switch (+status) {
            case 403:
                alert('伺服器不愛搭理你~~');
                break;
            case 404:
                alert('你傻啊，地址都錯了~~');
                break;
            case 500:
                alert('伺服器開小差了~~');
                break;
        }
    } else {
        // @2 請求超時或者中斷 
        if (reason && reason.code === "ECONNABORTED") {
            alert('請求超時或者被中斷了~~');
        }
        // @3 斷網
        if (!navigator.onLine) {
            alert('當前網路出問題了~~');
        }
    }
    // 統一失敗提示處理完，到業務程式碼處，我們還是要失敗的狀態，這樣才能繼續做一些自己單獨想做的失敗處理
    return Promise.reject(reason);
});