Axios的封装及使用方法

4.axios配置将axios配置到Vue中，成为它的子成员。每次需要通过Vue触发axios调用（axios本身不要贸然执行）)Vue.prototype.$http=axios//在main.js中配置this.$http.get()//在组件中使用，$http是vue指向axios的成员名，可以自定义为axios设置请求根地址，统一设置请求地址的前缀，做应用的时候使用后缀改进开发效率axios.defaults.baseURL='根地址'//语法//引入axios并配置axios.defaults.baseURL='http://127.0.0.1:3000/api'vue.prototype.$http=axios五、interceptorinterceptors5.1客户端和服务端之间为什么要使用拦截器axios来传递数据？网络好，服务器比较空闲，axios执行速度快，网络不好，服务器繁忙，axios执行速度慢（这时候用户不管快不快axios的执行速度是，用户需要等待，如果axios执行过程中页面有一定的提示，用户体验会更好，这时候可以应用拦截器5.2axios有两种本身拦截器：请求拦截，响应拦截请求拦截器axios每次发起请求都会执行这里的逻辑，在这个地方可以在发送前配置axios，也可以在发送前进行检查，检查是否ok在这种情况下,开始向服务器发送请求.config表示axios请求的配置对象,可以用于后面对axios进行相关配置//axios请求拦截器axios.interceptors.request.use(function(config){//------------------------------------------//axios请求前的逻辑处理nprogress.start()vartoken=window.sessionStorage.getItem('token')if(token!==null){config.headers.Authorization=token}//------------------------------------returnconfig},function(error){returnPromise.reject(error)})responseinterceptoraxioscompletedwithservice端机交互返回客户端后，这里的逻辑是执行的，后续的一些收尾事情都可以在这里完成。response代表服务器端返回给axios的信息一般不处理//添加响应拦截器axios.interceptors.response.use(function(response){//对响应数据做一些处理nprogress.done()returnresponse},function(error){//DosomethingabouttheresponseerrorreturnPromise.reject(error)})6.封装axios6.1封装在Vue项目中，可以在React项目下新建axios.js（或axios.ts）src根目录，可以新建一个request文件夹，在request文件夹下新建一个request.js（或者request.ts）。importaxiosfrom'axios'//如果是ts文件，可以加上这个接口//配置项interface/**interfaceAxiosOption{baseURL:stringtimeout:number}*///配置项//constaxiosOption:AxiosOption={//对于ts，使用这个限定类型constaxiosOption={baseURL:'http://127.0.0.1:9000/manage',//baseURL:'/api',//配置好后就可以使用这个/api跨域。这个不是固定的，可以根据自己的跨域配置来替换。timeout:5000,}//创建单例//由于实际项目可能有多个接口地址//create可以创建多个实例，使用接口中的几个地址可以创建多个实例constinstance=axios.create(axiosOption)//添加请求拦截器instance.interceptors.request.use(function(config){//axios请求返回配置前的逻辑处理},function(error){//对请求错误做一些处理returnPromise.reject(error)})//添加响应拦截器实例。拦截器.response.use(函数(response){//对响应数据做一些处理returnresponse.data},function(error){//对响应错误做一些处理returnPromise.reject(error)})exportdefaultinstance6.2封装后使用vue，创建一个新的api.js接口模块//导入封装好的axiosimportaxiosfrom'../axios'exportdefault{//----------------------------隐藏页面--------------------------------------------/***Add*/hideParameterAdd(data){returnaxios.post(`/add`,data)},}//Import在React中，创建一个新的api.js//import封装的request.jsimportrequestfrom'./request'//registerinterfaceexportconstregisterApi=(params)=>request.post('/register',params)//ReactimportReactinthecomponent,{useState}from'react'//importapi.js在页面上到使用import{loginApi}from'./request/api'exportdefaultfunctionLogin(){constonFinish=async(values)=>{loginApi(values).then((res:IResRegister)=>{console.log(res)})}return(111