这篇文章的主要目的是告诉正在学习vue3或者准备学习vue3的同学，vue3中网络请求axios的使用方法，免得有点vue3的同学有疑问？lifecycle,router,vux的使用变了，那么axios的使用有什么变化吗？小姐姐在使用axios前需要先安装。yarndaddaxiosnpmstallaxiosbowerinstallaxios以上四种安装方式，根据自己创建的工程，自行选择方式。一、axio的基本使用先创建一个组件，导入axios测试一下是否导入成功！编写如下代码：l'})})}}onMounted是一个生命周期钩子函数，这个网络请求会在页面加载完成后被调用。axios的方法没有设置网络请求方式。默认为GET请求。打开服务查看网络请求，发现请求失败：Errorcontent:AccesstoXMLHttpRequestat'https://xxxxx/hj/mp/banner/l'fromorigin'http://localhost:3000'已被CORS策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。这表明存在跨源问题。2.如何解决跨域问题？使用proxy解决这个问题，新建一个vue.config.js文件，添加配置：module.exports={devServer:{proxy:{'/api':{target:'https://xxxxx.net',changeOrigin:true,pathRewrite:{'^/api':''}}}}}刷新页面查看效果，尴尬，请求地址完全正确，却一直提示404找不到地址。vue2中的项目，请求是正常的，但是在vue3中是404。在网络请求时，增加全局配置，在请求时删除url中的域名。axios.defaults.baseURL='/api'axios.defaults.headers.post['Content-Type']='application/json'axios({url:'/hj/mp/banner/l'})修改后，刷新页面网络请求成功。3.封装没用。三方库一用上，说的最多的就是怎么封装，封装后怎么用，直接用不好吗？我跟你说清楚，还是太年轻了……受过几次苦就记住了。封装最大的好处就是如果三方框架有bug或者需要改三方框架，只需要修改一处，修改完成。维护方便，工作量小，不易遗漏。由于axios的请求方式很多，所以封装的时候可以有很多类型。方法一：importaxiosfrom'axios'//全局配置axios.defaults.baseURL="/api"axios.defaults.timeout=5000//拦截器axios.interceptors.request.use(config=>{returnconfig},error=>{returnPromise.error(error)})axios.interceptors.response.use(response=>{returnresponse.data},error=>{returnPromise.error(error)})exportfunctionrequest(url='',params={},type='POST'){//设置urlparams的默认值typereturnnewPromise((resolve,reject)=>{letpromiseif(type.toUpperCase()==='GET'){promise=axios({url,params})}elseif(type.toUpperCase()==='POST'){promise=axios({method:'POST',url,data:params})}//处理返回promise.then(res=>{resolve(res)}).catch(err=>{reject(err)})})}//调用import{request}from'../network/request.js'exportdefault{mounted(){request('/hj/mp/banner/l').then(res=>{console.log(res);}).catch(err=>{console.log(err);})}}由于axiosreturn本身就是一个promise对象，所以我们不需要为外层实例化promise对象，封装就变成了更简单。方法二：importaxiosfrom'axios'//全局配置axios.defaults.baseURL="/api"axios.defaults.timeout=5000exportfunctionrequest(config){constinstace=axios.create({timeout:50000,method:'post'})//请求拦截instace.interceptors.request.use(config=>{returnconfig},err=>{})//响应拦截instace.interceptors.response.use(res=>{returnres.data},err=>{//错误处理})returninstace(config)}//调用import{request}from'./request'request({url:'/hj/mp/banner/l',}).then(res=>{console.log(res);}).catch(err=>{console.log(err);})axios有很多种封装方式。有兴趣的同学可以去axios文档了解一下，自己封装试试。一个，还是保存吧，以后直接复制使用就好了，不用费心去打包了。4.全局引用axios可以通过全局引用使用上面封装的request方法，这样就可以在项目的任意文件中使用。在main.js中添加全局属性constapp=createApp(App)app.config.globalProperties.$http=requestapp.mount('#app')。以上三者的顺序不可调整！在组件中使用时：import{defineComponent,getCurrentInstance,onMounted}from"vue"exportdefaultdefineComponent({setup(props,ctx){const{proxy}=getCurrentInstance()onMounted(()=>{console.log(proxy);proxy.$http('/hj/mp/banner/l').then(res=>{console.log(res);})})}})我可以看到最后的祝贺了。这是唯一改变了axios在vue3中的使用。
