封裝原生Ajax 和 Axios的 二次封裝

AJAX

異步的JavaScript與XML技術（ Asynchronous JavaScript and XML ）

Ajax 核心使用 `XMLHttpRequest` （XHR）對象,首先由微軟引入的一個特性；Ajax 不需要任何瀏覽器插件，能在不更新整個頁面的前提下維護數據（可以向服務器請求額外的數據無需重載頁面），但需要用戶允許JavaScript在瀏覽器上執行。

 

XHR 對象用法

var xhr = new XMLRequestHttp() // 通過XMLHttpRequest 構造函數來創建

open 方法

xhr.open(method, url, async, user, password);

method：要發送的請求類型 GET、POST、PUT、DELETE 。（必選）

url：請求的URL （必選）

axync ：布爾值，是否異步發送請求，默認true（true 時，已完成事務的通知可供事件監聽使用，如果 xhr.multipart為true,則此參數必須為true；false 時，send()方法直到收到答復前不會返回）

user：用戶名用於認證用途 默認 null

password：用戶名用於認證用途 默認 null

調用open方法不會真正發送請求，只是准備發送請求，並且URL有同源策略的限制（須和頁面的主域、端口、協議一致，只要一處不符合要求將報錯，數據將被攔截，可通過前后端配置，或使用代理來解決）。

setRequestHeader() 

如需設置 Accpet 頭部信息，可通過setRequestHeader() 方法來設置

 Accpet 頭部信息：告知客戶端可以處理的內容類型，用 MIME類型 表示；使用 Content-Type  服務端使用 `Content-Type` 通知客戶端它的選擇

 媒體類型（ MIME類型 ） ：一種標准，用來表示文檔、文件或字節流的性質和格式。 完整類型列表 

Content-Type ：實體頭部用於指示資源的 MIME 類型，告訴客戶端實際返回的內容類型；瀏覽器會在某些情況下進行MIME查找，並不一定遵循此標題的值; 為了防止這種行為，可以將標題 X-Content-Type-Options 設置為 nosniff。

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

send 方法

 xhr.send(data);

data：作為請求主體發送的數據，如果不需要通過請求主體發送數據，則必須傳 null 

調用 send()發送請求，在收到響應后，響應的數據會自動填充XHR對象的屬性

responseText ：從服務端返回的文本

xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200) {5             console.log(xhr.responseText);
        }
    }
};

responseXML

如果響應的 Content-Type 為 text/html 或 application/xml，將保存包含響應數據的 XML DOM 文檔，對於其它類型的數據則為 null, 也可通過overrideMimeType()  強制 XHR 對象解析為 XML

// overrideMimeType() 用來強制解析 response 為 XML
xhr.overrideMimeType('text/xml');

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) { 8       console.log(xhr.responseXML);
    }
  }
};

status

返回響應的HTTP狀態碼，請求完成前值為0，如果XHR 對象出錯 值也是0， 200 表示請求成功，304表示請求的資源並沒有修改，可直接使用瀏覽器種緩存的數據。 其它狀態信息

statusText

 返回響應的HTTP狀態說明，status 值為 200 時  statusText為 "OK"

readyState

返回一個當前XHR對象所處的活動狀態

值	狀態	描述
0	UNSENT	代理被創建，但尚未調用 open() 方法。
1	OPENED	open() 方法已經被調用。
2	HEADERS_RECEIVED	send() 方法已經被調用，並且頭部和狀態已經可獲得。
3	LOADING	下載中；響應體部分正在被接收 responseText 屬性已經包含部分數據。
4	DONE	下載操作已完成。

 

onreadystatechange

當 readyState變化時會觸發次事件函數，如果使用 abort() 取消請求則次事件函數不會被觸發

xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

 

 參考資料

 

兼容性

 

封裝 XMLHttpRequest 對象

// 創建 構造函數
function Ajax(obj) {
    this.url = obj.url ||'';
    this.type = obj.type || 'get';
    this.data = obj.data ||{};
    this.success = obj.success || null;
    this.error = obj.error || null;
}
// 原型上創建方法支持 post 和 get
Ajax.prototype.send = function(){
    var self = this;
    var  toStr = Object.prototype.toString; 
    if (self.data === null && typeof self.data !== 'object' && Array.isArray(obj)) return;
    return (function(){
            // 實例化 XML對象
            var xhr = new XMLHttpRequest();
            var data = '';
            // 序列化參數
            for (var k in self.data){
                    data += k + '=' + self.data[k] + '&';
            }
            data = data.substr(0,data.length - 1);
            // 接收回調函數             
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        isFunction(self.success)  &&  self.success(xhr.responseText)
                    }else{
                        isFunction(self.error)  && self.error(xhr)
                    }
                }
            }
            // 初始化請求
            if(self.type.toLocaleLowerCase() === 'post'){
                    xhr.open ('post',self.url,true)
                    // 設置請求頭
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    //發送請求
                    xhr.send(data)
                } else {
                    xhr.open('get', self.url + "?" + data,true)
                    xhr.send(null)
            }
    }());
};

function isFunction(obj){
    return toStr.call(obj) === "[object Function]"
}

var ajax = new Ajax({
     type:'post',
     url:"/login",
     data:{ 
         loginname:"admin",
         password:"admin" 
        },
      success:function(e){
            console.log(e)
            }, 
       error:function(err){
              console.log(err)
              },
        }).send();

 

XMLHttpRequest Level 2 相比於 老版本的 XMLHttpRequest 新增以下內容：

可以設置 HTTP 請求超時時間

var xhr = XMLHttpRequest();
 xhr.open('GET'.'url');
 // 超時 2s
 xhr.timeout = 2000;
 // 超時處理
 xhr.ontimeout = function(e) {
     console.log(e)
 }
 xhr.send(null)

可以通過 FormData 發送表單數據

 // 實例化 FormData
 var formData = new FormData();
  // 添加數據
  formData.append(key,value);

  xhr.open('POST','url');
  xhr.send(formData);

可以上傳文件

• FormData 除了可以添加字符串數據，也可以添加 blob、file 類型的數據，因此可以用於上傳文件。
• 在瀏覽器中，一般是通過文件上傳輸入框來獲取 file 對象，比如：

<input type="file" name='uploadFile' id="upload-file" />

document.getElementById('upload-file')
        .addEventListener('change', function () {
            
            var formData = new FormData();
            // 獲取數據
              formData.append('uploadFile', this.files[0])
               xhr.send(formData)
      })

 

支持跨域請求

• 瀏覽器默認是不允許跨域請求的，有時候又是必要的，在以前通常使用JSONP來解決（IE10 以下不支持）
• 為了標准化跨域請求， W3C提出 跨域資源共享（CORS）前端無須修改代碼，只需 服務器返回 Access-Control-Allow-Origin 響應頭，指定允許對應的域
• CORS 默認不發送 cookie 如果需要發送，前端需要設置 withCredentials 屬性，同時服務器需要 返回 Access-Control-Allow-Credentials: true,

   xhr.withCredentials = true;

檢測XHR是否支持CORS最簡單的方式，就是檢查是否存在 `withCredentials`，再檢測`XDomainRequest` 對象是否存在，即可兼顧所有瀏覽器

let createCORSRequest = (method,url)=>{
    let var xhr = mew XMLHttpRequest();
    if ('withCredentials' in xhr){
      xhr.open(method,url,true);
    }else if(typeof XDomainRequest != 'undefined'){
      xhr = new XDomainRequest();
      xhr.open(method,url);
    }else{
      xhr = null
    }
    return xhr
}
    let request = createCORSRequest('get','baidu.com')
    if(request){
      request.onload = function(){
        // request.responseText
      }
      request.send()
    }

 

Preflighted Requests：

- 一個透明服務器驗證機制，用於檢查服務器是否支持[CORS](http://www.ruanyifeng.com/blog/2016/04/cors.html)

這是一個 OPTIONS 請求，使用了三個請求頭

- Access-Control-Request-Method：請求自身使用的方法

- Access-Control-Request-Headers：自定義頭部信息，多個頭部以逗號分隔

- Origin報頭：和簡單請求相同，將請求的域發送給服務端，服務端再Access-Control-Allow-Origin 響應頭中返回同樣的域即可解決跨域問題。

 

img src特性：

- 一個網頁可以從任何網頁中加載圖像，不用擔心跨域問題，通過onload 和 onerror 事件處理確定是否接收到響應

- 請求的數據通過查詢字符串形式發送，響應可以是任意內容，通常是像素圖或204響應。

- 只能發送 get 請求，無法訪問服務器的響應文本

 

 

let img = new Image();
img.onload = function (){
  console.log('done')
}
img.src = 'http://www.baidu.com?test=test1'

 

 

可以獲取服務端二進制數據

1. 使用 overrideMimeType 方法覆寫服務器指定的 MIME 類型，從而改變瀏覽器解析數據的方式

// 參數 MIME 類型
// 告訴瀏覽器，服務器響應的內容是用戶自定義的字符集 
xhr.overrideMimeType('text/plain; charset=x-user-defined');
// 瀏覽器就會將服務器返回的二進制數據當成文本處理，我們需要做進一步的轉換才能拿到真實的數據
  // 獲取二進制數據的第 i 位的值
  var byte = xhr.responseText.charCodeAt(i) & 0xff

 

  "& 0xff" 運算 參考 阮一峰的文章

2.xhr.responseType 用於設置服務器返回的數據的類型,將返回類型設置為 blob 或者 arraybuffer，然后就可以從 xhr.response 屬性獲取到對應類型的服務器返回數據。

  xhr.responseType = 'arraybuffer'
  xhr.onload = function () {
  var arrayBuffer = xhr.response
  // 接下來對 arrayBuffer 做進一步處理...
  }

 

可以獲取數據傳輸進度信息 參考資料

使用 onload 監聽了一個數據傳輸完成的事件。

 

// 上傳進度監聽
xhr.upload.addEventListener('progress', onProgressHandler, false);

// 傳輸成功完成
xhr.upload.addEventListener('load', onLoadHandler, false);
// 傳輸失敗信息
xhr.upload.addEventListener('error', onErrorHandler, false);

更多資料參考: 阮一峰的文章 MDN

 

 

AXIOS

• 基於 Promise 的 Http 庫
• 可以在客戶端 和 nodeJs中使用
• 在客戶端創基 XMLHttpRequests
• 在nodeJs 創建 HTTP 請求
• 支持Promise
• 可攔截轉化請求和響應數據
• 取消請求
• 自動轉化JSON數據
• 支持客戶端 XSRF

 兼容性

 

安裝

npm install axios

methods

Get

const axios = require('axios')

axios.get('url?id=xxx')
     .then(res => {
       console.log(res)
     })
     .catch(err =>{
       console.log(err)
     })
//or
axios.get('url',{
  params:{
    id:'xxxxx'
  }
    })
   .then(res =>{
     console.log(res)
   })
   .catch(err =>{
       console.log(err)
     })

同樣的傳參方法有 delete

post

axios.post('url',{name:'Owen'})
     .then(res =>{
       console.log(res)
     })
     .catch(err =>{
       console.log(err)
     })

同樣的傳參方法有 put patch

 

concurrent requests

axios.all([axios.get('url1'),axios.get('url2')])

API

axios(config)

axios({
  method:'get', // default is get 
  url:'url', // request  url
  data:{ // 僅支持post，put和patch方法，數據作為請求主體發送 ( Only the post,put and patch methods are supported, and the data is sent as the request body )
  /* 瀏覽器僅支持傳遞 FormData, File, Blob （The browser only supports passing FormData, File and Blob)
     Node 僅支持傳遞 Stream, Buffer (The Node only supports passing Stream, Buffer)
  */
    name:'owen'
  },
  baseURL:'base/url', // 除非url是絕對路徑，否則將baseURL添加到url的前面 (Add baseURL to then front of the url unless the url is an absolute path)
  transformRequest: [function (data, headers) {
    // 可以修改發送的請求數據和請求頭，只支持put，post和patch，回調函數必須返回Buffer，ArrayBuffer，FormData或Stream數據
    // Can modify the sent request data and request header,only support put, post and patch.
    // Callback must return Buffer, ArrayBuffer, FormData or Stream data
    
    // Do whatever you want to transform the data

    return data;
  }],
  transformResponse: [function (data) {
     // 修改響應數據，再傳遞給 then或catch 方法 （Modify the response data and pass it to the then or catch method)
    // Do whatever you want to transform the data

    return data;
  }],
  headers: {'X-Requested-With': 'XMLHttpRequest'}, // 自定義請求頭 (Custom request header)
  params:{ // 添加到url尾部的參數，一般用於get 和 delete（ Parameters addde to the end of the url,generally used for get and delete )
    id:'xxx'
  },
   paramsSerializer: function (params) { //序列化 [params] (https://www.npmjs.com/package/qs)
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  timeout:1000,// default is 0 , 設置請求超時時間，單位毫秒 （ Set request timeout in milliseconds )
  withCredentials: true, // default is false, 跨域時是否攜帶cookie（ Whether to carry cookies when crossing domains )
  adapter: function (config) {
    /*攔截響應數據*/
      // At this point:
    //  - config has been merged with defaults
    //  - request transformers have already run
    //  - request interceptors have already run
    
    // Make the request using config provided
    // Upon response settle the Promise
      return new Promise(function(resolve, reject) {
  
    var response = {
      data: responseData,
      status: request.status,
      statusText: request.statusText,
      headers: responseHeaders,
      config: config,
      request: request
    };

    settle(resolve, reject, response);

    // From here:
    //  - response transformers will run
    //  - response interceptors will run

      /**
       * Resolve or reject a Promise based on response status.
       *
       * @param {Function} resolve A function that resolves the promise.
       * @param {Function} reject A function that rejects the promise.
       * @param {object} response The response.
       */
        function settle(resolve, reject, response) {
            var validateStatus = response.config.validateStatus;
            if (!validateStatus || validateStatus(response.status)) {
              resolve(response);
            } else {
              reject(createError(
                'Request failed with status code ' + response.status,
                response.config,
                null,
                response.request,
                response
              ));
            }
          };
        /**
         * Create an Error with the specified message, config, error code, request and response.
         *
         * @param {string} message The error message.
         * @param {Object} config The config.
         * @param {string} [code] The error code (for example, 'ECONNABORTED').
         * @param {Object} [request] The request.
         * @param {Object} [response] The response.
         * @returns {Error} The created error.
         */
        function createError(message, config, code, request, response) {
          var error = new Error(message);
        return enhanceError(error, config, code, request, response);
          }

        /**
         * Update an Error with the specified config, error code, and response.
         *
         * @param {Error} error The error to update.
         * @param {Object} config The config.
         * @param {string} [code] The error code (for example, 'ECONNABORTED').
         * @param {Object} [request] The request.
         * @param {Object} [response] The response.
         * @returns {Error} The error.
         */
        function enhanceError(error, config, code, request, response) {
            error.config = config;
            if (code) {
              error.code = code;
            }

            error.request = request;
            error.response = response;
            error.isAxiosError = true;

            error.toJSON = function() {
              return {
                // Standard
                message: this.message,
                name: this.name,
                // Microsoft
                description: this.description,
                number: this.number,
                // Mozilla
                fileName: this.fileName,
                lineNumber: this.lineNumber,
                columnNumber: this.columnNumber,
                stack: this.stack,
                // Axios
                config: this.config,
                code: this.code
              };
            };
          return error;
        }
    });
  },
  auth:{ //  表示應使用HTTP Basic身份驗證，並提供憑據 ( indicates that HTTP Basic auth should be used, and supplies credentials. )
    user:'xxx',
    password:'***'
  },
  responseType: 'json',/* 服務器響應的數據類型（ The server response data type ） 
                         支持 arraybuffer, blob, document, json, text, stream 
                        */
  responseEncoding:'utf8', // 用於解碼響應的編碼 (Encoding for decoding the response )
  xsrfCookieName: 'XSRF-TOKEN', // default is XSRF-TOKEN , csrf令牌Cookie 名稱
  xsrfHeaderName: 'X-XSRF-TOKEN', //default is X-XSRF-TOKEN, xsrf標記值的http標頭的名稱
onUploadProgress: function (progressEvent) { //上傳進度事件 （handling of progress events for uploads ）
    console.log(progressEvent)
  },
onDownloadProgress: function (progressEvent) { // 下載進度事件 （ handling of progress events for downloads）
   console.log(progressEvent)
  },
maxContentLength: 2000, // 允許響應內容的最大字節 （defines the max size of the http response content in bytes allowed）
validateStatus: function (status) { // 返回給定HTTP狀態范圍, 如果狀態在給定范圍內，響應數據傳給`then` ，否則傳給 `catch` ( Returns the given HTTP status range, if the status is within the give range, the respones data is passed to `then`, otherwise passed to `catch` ) 
    return status >= 200 && status < 300; // default
  },
  maxRedirects: 5, // default is 5  // 定義Node 中最大重定向數  ( defines the maximunn number of redirects in Node )
  socketPath: null, //  default is null 定義要在node.js中使用的 UNIX socket
  httpAgent: new http.Agent({ keepAlive: true }), // node 中 http 和 https 的代理
  httpsAgent: new https.Agent({ keepAlive: true }),// http://nodejs.cn/api/http.html
  proxy: { // 代理配置
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
          }
   },
    cancelToken: new CancelToken(function (cancel) { // 取消請求的 token
  })
  })  
  .then(res =>{
       console.log(res)
     })
  .catch(err =>{
       console.log(err)
     })

全局配置

通過 axios.create 方法來替換全局配置

 

const instance = axios.create({
  baseURL: 'base/url'
});

 

通過axios.defaults 對象替換全局默認配置

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

攔截器

 

攔截請求數據

 

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

 

攔截響應數據

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

刪除攔截器

 

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

查閱更多信息

Axios 二次封裝

-  核心文件

/**
  * @desc: axios封裝
  * @author: ggw 
  * @module: axios
  * @description: 配合使用 餓了么的 Message和Loading
  * 
  */
 import axios from 'axios';
 import qs from 'qs';
 import {
     Message,
     Loading
 } from 'element-ui';
 
 import router from '../router'; 
 let loading;
 let headerNone = {
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
 };
 let headerTwo = {
     'Content-Type': 'application/json; charset=UTF-8'
 };
 let baseURL = window.location.origin ;


 /** 
  * @description: 定義初始化Loading
  * @method: startLoading 
  */
  const startLoading = () => {
     loading = Loading.service({
         target: '.content-box',
         background: 'rgba(220, 220, 220, 0.51)'
     });
 };
 

 let count = 0;
 /** 
  * @description: 顯示Loading 同時多個發送請求 只開啟一次Loading
  * @method: showLoading  && hideLoading
  */
  const showLoading = () => {
     if (count === 0) startLoading();
     count++;
 };
  const hideLoading = () => {
     if (count <= 0) return;
     count--;
     if (count === 0) {
         setTimeout(() => {
            loading.close();
         }, 300);
     }
 };

 export let filiter = r => {

     for (let item of Object.keys(r)) {
         if (r[item] === ' ' || r[item] === '') {
             delete r[item];
         }
     }
 };
 /** 
  * @description: 出口
  * @exports api
  * @param:options 必須是對象
  * options 對象為 axios對應參數
  */
 export default (options) => {
     /** 
      * @description: 用來初始化承諾的回調。
      * 這個回調被傳遞了兩個參數：
      * 一個解析回調用一個值或另一個承諾的結果來解析承諾，
      * 以及一個拒絕回調，用來拒絕承諾的原因或錯誤。
      * @constructor: Promise
      */
     return new Promise((resolve, reject) => {
         const instance = axios.create({
             withCredentials: true,
             headers: headerNone,
             baseURL
         });
         // 請求攔截器
         instance.interceptors.request.use(config => {
              let {load = true} = config.data || config.params || {} ;
             if (load) showLoading();
             //  過濾無值參數
             if (config.params) {
                delete config.params.load;
                 filiter(config.params);
                } else if (config.data) {
                 filiter(config.data);
                delete config.data.load;
                }
             if (
                 config.method.toLocaleLowerCase() === 'post' ||
                 config.method.toLocaleLowerCase() === 'put'
             ) {
                 // json 格式傳遞
                 if (config.json) {
                     config.headers = headerTwo;
                 } else {
                     config.data = qs.stringify(config.data);
                     config.data = config.data + '&t=' + Date.now();
                 }
             }
             return config;
         }, error => {
              hideLoading();
             return Promise.reject(error);
         });
         // 響應攔截器
         instance.interceptors.response.use(response => {
            setTimeout(hideLoading,0);
             let data;
             // IE9時response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
             if (!response.data ) {
                 data = response.request.responseText;
             } else {
                 data = response.data;
             }

             switch (data.code) { // 接口定義字段
                 case '001':
                     Message({
                         showClose: true,
                         message: data.msg || '未知錯誤,請聯系管理員',
                         type: 'error'
                     });
                     router.push({
                         path: '/login'
                     });
                     break;
                default:
             }
             return data;
         }, err => {
           hideLoading();

             if (err && err.response) {
                 let msg = {
                     400: '請求錯誤',
                     401: '未授權，請登錄',
                     403: '拒絕訪問',
                     404: `請求地址出錯: ${err.response.request.responseURL}`,
                     408: '請求超時',
                     500: '服務器內部錯誤',
                     501: '服務未實現',
                     502: '網關錯誤',
                     503: '服務不可用',
                     504: '網關超時',
                     505: 'HTTP版本不受支持'
                 };
                 let status = parseInt(err.response.status,10);
                 Message({
                     showClose: true,
                     message: msg[status] || '',
                     type: 'error'
                 });
             } else {
                 Message({
                     message: err.config ? `請求地址出錯: ${err.config.url}` : err,
                     type: 'error'
                 });
             }

             return Promise.reject(err);
         });
         // 請求
         instance(options)
             .then(res => {
                 resolve(res);
                 return false;
             })
             .catch(error => {
                   reject(error);
             });
     });
 };

 -  導出

import axios from './api';

const get = (url, data) => {
    return axios({
      url,
      method: 'get',
      params:data
    });
  };
const post = (url, data,json) => {
    return axios({
        url,
        method: 'post',
        data,
        json
    });
    };
const del = (url, data) => {
return axios({
    url,
    method: 'delete',
    params:data
});
};
const put = (url, data,json) => {
    return axios({
        url,
        method: 'put',
        data,
        json
    });
    };

export default {
    get,
    post,
    del,
    put
};

-  導入vue main.js

import Vue from 'vue';

import api from './api';

Vue.prototype.$api = api;

 

- 使用

this.$api.get(url,data,isJson);

 

Owen 的個人博客
博客園