【重点突破】—— React应用中封装axios(转)

Z时代
2024-01-10
分类：综合

react

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 > </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;