axios二次封装

pakolagij 发布于2019-08-23 14:00 / 3099人阅读

摘要：给用户以提示，在封装对应的或者的时候把一些固定必传的参数加上去，写其他请求时加上改请求的其他参数就好了超时的设置，以及超时后的一些处理，是重新请求还是做其他操作。

import axios from "axios"
import qs from "qs"
import ErrorCode from "./error"//封装code错误时对应的提示
import router from "../router/index" //这里的router 请找你对应的router
import {
  Message
} from "element-ui";
const service = axios.create({
  baseURL: "http://localhost:3000", // 封装请求地址的前缀
  timeout: 5000 // 超时时间
})

封装请求头

service.interceptors.request.use(config => {
    /**
     * 请求之前判断token是否存在或者过期，如果过期直接跳转到登陆页面，再次获取token，在这里你还可以做其他判断
     * **/
    if(!sessionStorage.getItem("token")) {
        router.push("/Login")
    }
    if (config.method === "post") {
      // 序列化,若是能直接接受json 格式,可以不用 qs 来序列化的
      config.data = qs.stringify(config.data);
    }    
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: "加载超时"
    })
    return Promise.reject(error)
})

封装响应

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //这里约定后台返回code为200时为正确的请求响应    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//这里code不是200的时候显示自己封装的错误code提示
      })      
    }
        return response.data
    }, function (error) {
        // 对响应错误做点什么
    return Promise.reject(error);
});

封装post请求

   export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      let parms = {
        token:"4552565215"
      }
      service.post(url,Object.assign(parms,data))//可以把你项目的必传项又不会发生改变的例如token 封装再这里就不用每次写token了
        .then(response => {
          resolve(response);
        }, err => {
          reject(err)
        })
        .catch(res => {
          console.log("超时处理",res)
        })
    })
  }

ErrorCode示例

const ErrorCode = {
    "100":"错误1",
    "101":"错误2",
    "102":"错误3",
    "103":"错误4",
    "104":"错误5",
}
export default ErrorCode

最后说说我理解的为什么要封装axios

1.在请求拦截中先需要判断一些必要的因素比如没有token的话需要直接跳转login页面重新获取。
2.默认前缀比如"http://baidu.com",然后上线之前使用本地的前缀，上线前改成你的线上地址再打包，当让这里可以使用webpack的配置来判断开发环境和生产环境使用不同地址。这个就看你自己了
3.在响应拦截中可以统一判断返回的code显示对应的错误信息。给用户以提示，
4.在封装对应的get或者post的时候把一些固定必传的参数加上去，写其他请求时加上改请求的其他参数就好了
5.超时的设置，以及超时后的一些处理，是重新请求还是做其他操作。
6.最后我能想到的也就这些，如有大佬路过可以指正随便加以指点，万分感谢！

云服务器 GPU云服务器二次封装二次浅封装实践【附源码】 axios axios cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99916.html

二次封装axios，根据参数来实现多个请求多次拦截

摘要：新建文件，设置请求拦截和处理的逻辑取消请求设置默认请求头，如果不需要可以取消这一步请求超时的时间限制开始设置请求发起的拦截处理代表发起请求的参数的实体得到参数中的字段，用于决定下次发起请求，取消对应的相同字段的请求如果没有就默认添加一个 1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑 import Vue from vue import axios from ax...

MoAir 2019-08-02 11:47 评论0 收藏0
二次封装axios，根据参数来实现多个请求多次拦截

摘要：新建文件，设置请求拦截和处理的逻辑取消请求设置默认请求头，如果不需要可以取消这一步请求超时的时间限制开始设置请求发起的拦截处理代表发起请求的参数的实体得到参数中的字段，用于决定下次发起请求，取消对应的相同字段的请求如果没有就默认添加一个 1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑 import Vue from vue import axios from ax...

gclove 2019-08-23 12:31 评论0 收藏0
axios基于常见业务场景的二次封装

摘要：是一个基于的库，可以用在浏览器和中。我在最近的几个项目中都有使用，并基于根据常见的业务场景封装了一个通用的服务。业务场景全局请求配置。请求携带，权限错误统一管理。 axios axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在前端框架中的应用也是特别广泛，不管是vue还是react，都有很多项目用axios作为网络请求库。我在最近的几个项...

JasinYip 2019-08-26 12:20 评论0 收藏0
axios 的二次封装（拦截重复请求、异常统一处理）

摘要：拦截重复请求如何标识每个请求下面函数，通过一个请求参数中的请求传递参数或请求传递参数来表示每一个请求。一直想封装一下 axios，可以方便项目中使用，今天有时间，就好好研究了一下。源码： // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...

luzhuqun 2019-08-23 12:03 评论0 收藏0