Axios簡介
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特性
- 支持node端和瀏覽器端
- 支持攔截器等高級配置
- 使用Promise管理異步，告別傳統callback方式
- 自動轉換 JSON 數據
- 客戶端支持防御 XSRF
安裝
- yarn 安裝
yarn add axios
-
npm 安裝
npm install axios -D
-
bower 安裝
bower install axios
簡單使用
aixos 可直接通過cdn加載實用,如下示例：
<html>
<head>
<title>Axios的使用 </title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<input type="button" onclick="getList()" value="點擊獲取"/>
<div id="content"> </div>
<script type="text/javascript">
function getList(){
axios.request({
url:'/article/home/index',
method:'get',
baseURL:'http://test.mediastack.cn/'
}).then(
res => {
console.log("get res:",res);
var str=JSON.stringify(res);
document.getElementById("content").innerHTML = str;
},error => {
console.log("get request failed:",error);
document.getElementById("content").innerHTML = error;
}
);
}
</script>
</body>
</html>
react中封裝axios
react中可以將axios封裝成一個文件，通過控制操作，可以實現錯誤、邏輯、和驗證統一處理，降低代碼的冗余度和可讀性。
請求封裝
/**
* 網絡請求配置
*/
import axios from "axios";
axios.defaults.timeout = 100000;
axios.defaults.baseURL = "http://test.mediastack.cn/";
/**
* http request 攔截器
*/
axios.interceptors.request.use(
(config) => {
config.data = JSON.stringify(config.data);
config.headers = {
"Content-Type": "application/json",
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
/**
* http response 攔截器
*/
axios.interceptors.response.use(
(response) => {
if (response.data.errCode === 2) {
console.log("過期");
}
return response;
},
(error) => {
console.log("請求出錯：", error);
}
);
/**
* 封裝get方法
* @param url 請求url
* @param params 請求參數
* @returns {Promise}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
}).then((response) => {
landing(url, params, response.data);
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
}
/**
* 封裝post請求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(
(response) => {
//關閉進度條
resolve(response.data);
},
(err) => {
reject(err);
}
);
});
}
/**
* 封裝patch請求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data).then(
(response) => {
resolve(response.data);
},
(err) => {
msag(err);
reject(err);
}
);
});
}
/**
* 封裝put請求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(
(response) => {
resolve(response.data);
},
(err) => {
msag(err);
reject(err);
}
);
});
}
//統一接口處理，返回數據
export default function (fecth, url, param) {
let _data = "";
return new Promise((resolve, reject) => {
switch (fecth) {
case "get":
console.log("begin a get request,and url:", url);
get(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request GET failed.", error);
reject(error);
});
break;
case "post":
post(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request POST failed.", error);
reject(error);
});
break;
default:
break;
}
});
}
//失敗提示
function msag(err) {
if (err && err.response) {
switch (err.response.status) {
case 400:
alert(err.response.data.error.details);
break;
case 401:
alert("未授權，請登錄");
break;
case 403:
alert("拒絕訪問");
break;
case 404:
alert("請求地址出錯");
break;
case 408:
alert("請求超時");
break;
case 500:
alert("服務器內部錯誤");
break;
case 501:
alert("服務未實現");
break;
case 502:
alert("網關錯誤");
break;
case 503:
alert("服務不可用");
break;
case 504:
alert("網關超時");
break;
case 505:
alert("HTTP版本不受支持");
break;
default:
}
}
}
/**
* 查看返回的數據
* @param url
* @param params
* @param data
*/
function landing(url, params, data) {
if (data.code === -1) {
}
}
如上，可通過過對axios請求的攔截實現添加公共請求頭，token 驗證等操作。
請求隔離
import http from '../utils/http';
/**
* 獲取首頁列表
*/
function getArticleList(){
return new Promise((resolve, reject) => {
http("get",'/article/home/index').then(res => {
resolve (res);
},error => {
console.log("網絡異常~",error);
reject(error)
})
})
}
export {
getArticleList
}
react 組件調用如下:
import React, { Component } from "react";
import { getArticleList } from "~/api/blog";
class Home extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
getArticleList().then(
(res) => {
console.log("get article response:", res);
},
(error) => {
console.log("get response failed!");
}
);
}
......
}
export default Home;
這樣，可以做到盡量讓數據請求可以頁面邏輯互不干擾，也方便后期統一維護和修改。
注：項目轉載自胖蔡的CDNS博客