React应用中封装axios
本文在enjoytoday首发，点击原文查看.
Axios简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
- 支持node端和浏览器端
- 支持拦截器等高级配置
- 使用Promise管理异步，告别传统callback方式
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
- yarn 安装
$ yarn add axios
- npm 安装
npm install axios -D
3.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 http("get",'/article/home/index');
}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;
这样，可以做到尽量让数据请求可以页面逻辑互不干扰，也方便后期统一维护和修改。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！