在React中封装及使用axios

·  阅读 1942
在React中封装及使用axios

在React中封装axios。

第一步:创建实例

使用自定义配置创建一个axios实例:

 const instance = axios.create({
   // 设置超时时间,单位毫秒
   timeout: 1000 //即1秒
 })
复制代码

第二步:请求拦截器

如果接口有鉴权认证(token),就要在请求时带上token,使用axios拦截器机制,就可以在请求的拦截器中添加token。

 instance.interceptors.request.use(function (config) {
     // 登录时就已经把token存到了cookie中
     const token = cookie.get("token");
     if (token) {
         config.headers.authorization = token;
     }
     return config;
 }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
 });
复制代码

第三步:响应拦截器

获取到服务器返回的状态码,然后根据状态码进行相对应的操作。

 instance.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     return response;
 }, function (error) {
     // 对响应错误做点什么
     if (error && error.response) {
         message.destroy();
         switch (error.response.status) {
             case 400:
                 message.error('错误请求');
                 break;
             case 401:
                 message.info({
                     content: "登录过期,请重新登录",
                     type: "info",
                     duration: 3,
                     maxCount: 1,
                     onClose: () => {
                         cookie.remove("userInfo");
                         window.location.href = '/login';
                     }
                 })
                 break;
             case 403:
                 message.info("拒绝访问");
                 break;
             case 404:
                 message.info("请求错误,未找到资源");
                 break;
             case 405:
                 message.info("请求方法未允许");
                 break;
             case 408:
                 message.info("请求超时");
                 break;
             case 500:
                 message.info("服务端出错");
                 break;
             case 501:
                 message.info("网络未实现");
                 break;
             case 502:
                 message.info("网络错误");
                 break;
             case 503:
                 message.info("服务不可用");
                 break;
             case 504:
                 message.info("网络超时");
                 break;
             case 505:
                 message.info("http版本不支持该请求");
                 break;
             default:
                 message.info(`连接错误${error.response.status}`);
         }
     }
     return Promise.reject(error);
 });
复制代码

第四步:使用

一、POST方法

post请求中的Content-Type常见的三种形式:

  • Content-Type:application/json
  • Content-Type:application/x-www-form-urlencoded
  • Content-Type:multipart/form-data

注:如果Content-Type是application/x-www-form-urlencoded形式,通过上面传递参数,后端收不到,必须对参数数据进行序列化处理,让它以普通表单形式(键值对)发送到后端,而不是json形式。可以通过第三方依赖来序列化参数----qs模块

封装POST请求

 const _post = (api, data, headers = {}) => {
     return new Promise((resolve, reject) => {
         instance.post(api, data, { headers })
             .then(res => { resolve(res) })
             .catch(error => { reject(error) })
     })
 }
复制代码

对三种POST的Content-Type请求,进行分类:

 const post = (api, data, headers = {}) => {
     headers['Content-Type'] = 'application/x-www-form-urlencoded'
     return _post(api, qs.stringify(data), headers)
 }
 ​
 const postJson = (api, data, headers = {}) => {
     headers['Content-Type'] = 'application/json;charset=utf-8'
     return _post(api, JSON.stringify(data), headers)
 }
 ​
 const postFormData = (api, data, headers = {}) => {
     headers['Content-Type'] = 'multipart/form-data'
     return _post(api, data, headers)
 }
复制代码

二、GET方法

 const get = (api, params = {}, headers = {}) => {
     return new Promise((resolve, reject) => {
         instance.get(api, { params, headers })
             .then(res => {
                 resolve(res)
             })
             .catch(error => {
                 reject(error)
             })
     })
 }
复制代码

整体代码展示:

 import axios from 'axios';
 import qs from 'qs'
 import cookie from 'js-cookie';
 import { message } from 'antd';
 ​
 const instance = axios.create({
     timeout: 120000,
 });
 ​
 //请求拦截处理
 instance.interceptors.request.use(function (config) {
     // ...如上
 }, function (error) {
     // ...如上
 });
 ​
 instance.interceptors.response.use(function (response) {
     // ...如上
 }, function (error) {
     // ...如上
 });
 ​
 const _post = (api, data, headers = {}) => {
   // ...如上
 }
 ​
 const post = (api, data, headers = {}) => {
    // ...如上
 }
 ​
 const postJson = (api, data, headers = {}) => {
    // ...如上
 }
 ​
 const postFormData = (api, data, headers = {}) => {
    // ...如上
 }
 ​
 const get = (api, params = {}, headers = {}) => {
    // ...如上
 }
 ​
 // 导出,供各页面调用
 export default { post, postJson, postFormData, get };
复制代码

调用

api.js

 // 导入
 import http from './request';
 ​
 // 封装调用,暴露出去调用
 export const getAdvertiserList = (params) => http.get('/api/project/advertiser', params);
复制代码

参考一:Axios中文官网

参考二:《完整的Axios封装-单独API管理层、参数序列化、取消重复请求、Loading、状态码...》

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改