http请求axios封装

来抄作业

先是对于axios的实例封装以及token在拦截器的处理

import axios, { AxiosRequestConfig } from 'axios'
import { createBrowserHistory } from 'history'const history = createBrowserHistory()//接口地址前缀
const baseApiUrl:string = '/api'//错误标识
let isErr = true//token前缀（也可以没有）
const PREFIX_TOKEN = 'Bearer'//返回错误说明和处理
let errorHandler = (error:any) =>{const response = error.responselet status,errorText,timerif(response){status = response.statuserrorText = codeMessage[response.status]}else if(error.code === 'CCC'){ //code是与后台商议好后的值，自行更改status = ''errorText = '服务器连接失败，请尝试重新登陆或联系相关服务人员'}if(isErr){isErr = falseclearTimeout(timer)//弹出错误信息message.error(errorText)timer = setTimerout(()=>{isErr = true},1000)}return
}//创建axios实例
let instance = axios.create({baseURL: baseApiUrl, //请求头地址timeout: 30000, //指定请求超时毫秒数headers: { //设置头部信息，也可不设，一般默认'Content-Type': 'application/json;charset=UTF-8','X-Reaquested-With': 'XMLHttpRequest'},withCredentials: false //表示跨域请求时是否需要使用凭证
})//添加请求拦截器
instance.interceptors.request.use((config) = >{//如果本地储存中有token值，则设置headers头部tokenconst token = localStorage.getItem('token')if(token){//将token设置到headers中，header的key是Authorizationconfig.headers.Authorization = PREFIX_TOKEN + token}return config},(error)=>{return Promise.reject(error)}
)// 添加响应拦截器
instance.interceptors.response.use((response) => {const status = response.data.result ? response.data.result.status : ''//token过期时，重定向到登录页//并删除session和local信息返回错误码//没有权限一般都是401if(status === '00') {const error = {response: {status: 401}}//取退出登陆前的路由const prevLogoutPath = sessionStorage.getItem('prevLogoutPath')//第一次没有，所以存下路由if(!prevLogoutPath ){sessionStorage.setItem('prevLogoutPath',history.location.pathname)}// 跳转到登陆页，删除用户信息和tokenhistory.replace('/login')localStorage.removeItem('useInfo')localStorage.removeItem('token')return Promise.reject(error)}return response},(error) => {return Promise.reject(error)}
)

下面是对请求方法的封装

import axios,{AxiosError,AxiosRequestConfig,AxiosResponse,Canceler,CancelTokenSource} from 'axios'export interface AjaxResponse{request:()=>Promise<AxiosResponse> //Axios异步函数cancel:Canceler //关联的cancel方法
}const baseConfig={validateStatus:function (status:number){return status < 400}
}/**封装了基本报错与cancel逻辑的Axios请求*/
export const ajax = (config:AxiosRequestConfig):Promise<any>=>{return new Promise<AxiosResponse<any>>((resolve,reject)=>{axios({...baseConfig, ...config}).then((response)=>{if(response.request.responseType==='blob'){resolve(response)return}const data = response.data//这里的code以现实后台为准if(data.code==='0'){//成功resolve(data)}else if(data.code==='A01000'){//当token出现问题是跳到登陆页面history.push('login')}else{//失败报错message.error(data.msg)reject(data)}}).catch((error:AxiosError<any>)=>{reject(error.response?.data)})})
}export function get(url:string,paramse?:any,source?:CancelTokenSource){return ajax({method:'get',url,params,cancelToken:source?source.token:undefined})
}//get形式文件流
export function getResponseBlob(url:string,paramse?:any,source?:CancelTokenSource){return ajax({method:'get',url,params,cancelToken:source?source.token:undefined})
}export function post(url:string,paramse?:any,source?:CancelTokenSource){return ajax({method:'post',url,params,responseType:'blob',cancelToken:source?source.token:undefined})
}//post形式文件流
export function postResponseBlob(url:string,paramse?:any,source?:CancelTokenSource){return ajax({method:'post',url,params,responseType:'blob',cancelToken:source?source.token:undefined})
}export function del(url:string,paramse?:any,source?:CancelTokenSource){return ajax({method:'delete',url,params,cancelToken:source?source.token:undefined})
}

http请求axios封装相关推荐

vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
axios 跨域_当遇到跨域开发时，我们如何处理好前后端配置和请求库封装
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
axios post body参数_Vue开发中的一些问题（axios封装）
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
network/request.js网络请求模块封装
网络请求模块封装 import axios from "axios"; //引入axios模块export function request(config) {//1,创建axio ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
19. 详解网络请求Axios
Axios是什么? Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.我们知道 Promise 是 js 异步的一种解决方案,它最大的特性就是可以通过 . ...
ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...

http请求axios封装

http请求axios封装相关推荐

最新文章

热门文章