axios / fetch / ajax

ajax

傳統 Ajax 指的是 XMLHttpRequest（XHR），最早出現的發送後端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先後關係的話，就會出現回調地獄。最常用的是jquery的ajax api，對原生XHR請求的封裝，添加了對JSONP的支持。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType
}).then(function(json) {
    //success
}, function(err) {
    //error
});

缺點：

不符合前段MVVM設計；
XHR本身架構不清晰；

axios

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質也是XHR請求

優點：

支持 Promise API
客戶端支持防止CSRF
提供了一些併發請求的接口（重要，方便了很多的操作）
從 node.js 創建 http 請求
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據

一，安裝

1，react框架

npm install react-axios -D
//-D 相當於 --save-dev

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'

2，vue框架

npm install -D axios vue-axios


import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);
//也可以單獨使用axios，不需要vue-axios
//注：單獨使用axios時，不能Vue.use(axios)，因爲axios組件封裝沒有提供install方法

二，發送請求

1，GET 請求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
##或者
axios.get('/user', {
    //URL參數，get請求專用
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2，POST 請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
##相當於
axios.post('/user', {
    //請求體數據，PUT，POST和PATCH請求專用
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3，自定義請求

（1）axios自定義配置請求

//默認發送get請求
axios(url[, config])
//例如post
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//例如get
axios({
  method: 'get',
  url: '/user/12345',
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

（2）axios自定義實例請求

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
instance.get(url, {});
instance.post(url, {});

4，多個併發請求

axios.all([axios.get('/user/12345'), axios.get('/user/12345/permissions')])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求現在都執行完成
  }))
  .catch(function (error) {
    // 任何一個請求失敗
  });

三，攔截器

1，攔截請求

##應用場景：判斷用戶登錄token是否過期等
axios.interceptors.request.use(function (config) {
    // 在發送請求之前做些什麼
    //一定要return config，否則請求無法執行
    return config;
  }, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
  });
  
##實例攔截器
instance.interceptors.request.use(function (config) {
    return config;
});

##移除攔截器
var myInterceptor = [axios/instance].interceptors.request.use(function () {/*...*/});
[axios/instance].interceptors.request.eject(myInterceptor);

2，攔截返回

##應用場景：對響應數據做預處理
axios.interceptors.response.use(function (response) {
    // 對響應數據做點什麼
    //一定要return response，否則無法獲取響應數據
    return response;
  }, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
  });

四，默認配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 2000;
...

五，取消請求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');

六，axios二次封裝

// src/http.js
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';

const http = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 請求超時時間
});
// request攔截器
http.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token'); 
    if (token) {
      config.headers['Authorization'] = token;
      // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
);

// response 攔截器
http.interceptors.response.use(
  response => {
    if(response.status === 200){
        return response.data;
    } else {
        //服務端狀態錯誤提示
        return Promise.reject('error');
    }
  },
  error => {
    //請求錯誤提示
    return Promise.reject(error);
  }
);
export default http;

// src/reset.js
import http from './http.js'

export default {
  post(url, data) {
    return http.post(url, data)
  },
  get(url, params) {
    return http.get(url, {
        params: params
    })
  }
}

// src/api/[各模塊api請求封裝].js
import request from '@/reset.js'; 
// axios的封裝 後續添加axios二次封裝

export async function getCommonList(query) {
  return await request.get('api/getCommonList', query);
}

fetch

fetch是ES6引入的Fetch API提供的接口，也是基於promise設計，但本質不是XHR請求，而是ES6引入的新的網絡請求接口。

fetch('http://example.com/movies.json', {
    method: 'POST', //請求方法，默認是get請求
    body: JSON.stringify(data), //post請求傳遞參數，且需要設置content-type
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'include', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer'
})
.then(response => response.json())
.catch(error => console.error(error));

fetch第一個參數是請求url，第二個參數是請求配置對象，配置請求類型，傳遞參數，請求頭等；
fetch請求成功後返回的是response對象，而不是用戶想要的json數據，要想拿到json數據，需要調用response的json()方法；
fetch請求收到一個代表錯誤的 HTTP 狀態碼時，從 fetch() 返回的 Promise 不會被標記爲 reject，即使響應的 HTTP 狀態碼是 404 或 500，也會將 Promise 狀態標記爲 resolve （但是會將 resolve 的返回值的 ok 屬性設置爲 false ），僅當網絡故障時或請求被阻止時，纔會標記爲 reject。可以根據response.ok字段判斷是否請求成功。

fetch二次封裝

// src/http.js
import { message, Spin } from 'antd';
const token = loaclStorage.getItem('token');
export default {
    get(url, params) {
        if(params) {
            let paramsArray = [];
            //拼接參數
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
        return fetch(url, {
            method: 'GET',
            headers: {
              'Authorization': token,//登錄令牌
              'Accept': 'application/json'
            },
            credentials: 'include'
        })
        .then(res => {
            if(res.ok){
                return res.json();
            }else{
                message.error(res.message);
            }
        });
        .catch(err => Promise.reject(err));
    },
    post(url, data) {
        return fetch(url, {
            method: 'POST',
            headers: {
              'Authorization': token,//登錄令牌
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            body: JSON.stringify(data),
            credentials: 'include'
        })
        .then(res => {
            if(res.ok){
                return res.json();
            }else{
                message.error(res.message);
            }
        });
        .catch(err => Promise.reject(err));
    }
}

// src/api/[各模塊api請求封裝].js
import http from '@/http.js';
export async function getUsers() {
    showLoading();
    const users = await http.get('api/users');
    hideLoading();
    return users;
}