作为一个前端开发者,不封装自己的请求是一件很麻烦的事情。我整理了一下自己的封装过程,封装了请求和请求拦截,响应拦截。流程如下:-->引入axios包-->写一个request用于出错时提醒的方法-->通过create创建axios请求-->配置axios的基本信息[baseURL(域名)),timeout(超时)]-->配置请求通过axios.interceptors.request.use拦截,有两个参数:---->config可以配置一些信息token等,config.headers.token='ssss'---->error表示请求错误->抛出异常returnPromiss.reject(error)-->通过axios.interceptors.response.use配置响应拦截,有两个参数---->res表示服务端响应成功状态码200,并根据返回信息进行相应操作,返回reslove(res)---->error表示请求错误,可以在error中获取response,让{response}=错误通过判断状态码判断404等信息...代码如下:importax来自“axios”的ios;consterrTips=msg=>{alert(msg)}constservice=axios.create({baseURL:填写自己的域名,timeout:10000})//请求拦截service.interceptors.request.use(config=>{//获取到缓存..请求头中加入tokenlettoken='ssss'config.headers.token=tokenreturnconfig},err=>{errTips(err)returnPromise.reject(err)})//响应拦截service.interceptors.response.use(res=>{//表示网络请求成功,stutas==200//判断接口返回的数据,这里我们还加了一个判断返回码不等于200,然后最后验证失败if(res.data.code!==200){errTips(res.data.msg)returnPromise.reject(res.data)//抛出异常}else{returnPromise.resolve(res.data)}},error=>{//网络请求错误判断状态码做相应操作let{response}=errorswitch(response.data.status){//可以单独封装case404:errTips(`${response.data.status}-->${response.data.message}`)break;case403:errTips(`${response.data.status}-->${response.data.message}`)break;default:errTips(`${response.data.status}-->${response.data.message}`)}returnPromise.reject(error)})exportdefaultservice请求封装后的API接口请求可以封装文件,示例如下:importrequestfrom'@/utils/request'exportdefault{apiGet(url,data){returnrequest({url,params:data,method:'get'})},apiPost(url,data){returnrequest({url,data,method:'post'})}}接下来在页面导入就可以直接使用了。示例如下:
