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

Axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

  • 支持node端和浏览器端
  • 支持拦截器等高级配置
  • 使用Promise管理异步，告别传统callback方式
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

安装

  1. yarn 安装 
    yarn add axios

  2. 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 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博客

posted @ 2021-02-13 15:57  柳洁琼Elena  阅读(1352)  评论(0)  编辑  收藏  举报