axios

Axios使用步骤

1、安装

npminstallaxios# 或者yarnaddaxios

2、创建axios实例并配置

创建一个文件，例如axiosInstance.js，然后设置基本的axios实例和配置。

importaxiosfrom'axios';// 创建axios实例constinstance=axios.create({baseURL:'https://api.example.com',// 你的基础URLtimeout:10000,// 请求超时时间headers:{'Content-Type':'application/json','Authorization':`Bearer YOUR_ACCESS_TOKEN`// 如果需要的话}});exportdefaultinstance;

3、添加请求和响应拦截器

在axiosInstance.js配置拦截器

// 添加请求拦截器instance.interceptors.request.use(config=>{// 在发送请求之前做些什么，例如设置token、添加通用头部等returnconfig;},error=>{// 对请求错误做些什么returnPromise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(response=>{// 对响应数据做点什么returnresponse.data;// 或者根据需要返回其他内容，例如response.data.data等},error=>{// 对响应错误做点什么returnPromise.reject(error);});

4、定义一些常用的请求方法

可以在axiosInstance.js中定义一些常用的请求方法

// 例如，定义一个get方法封装constget=(url,config={})=>instance.get(url,config);constpost=(url,data,config={})=>instance.post(url,data,config);constput=(url,data,config={})=>instance.put(url,data,config);constdel=(url,config={})=>instance.delete(url,config);// 注意这里是delete而不是del，JavaScript关键字不能用作变量名。export{get,post,put,del};// 导出这些方法供其他文件使用。

5、在其他文件中使用封装的axios实例和方法

import{get,post}from'./axiosInstance';// 根据你的路径调整导入路径// 使用封装的get方法发送请求get('/users').then(response=>{console.log(response);// 处理响应数据}).catch(error=>{console.error(error);// 处理错误情况});

封装axios

1、设置接口请求前缀
根据不同环境（开发、测试、生产）设置不同的请求前缀：

if(process.env.NODE_ENV==='development'){axios.defaults.baseURL='http://dev.xxx.com';}elseif(process.env.NODE_ENV==='production'){axios.defaults.baseURL='http://prod.xxx.com';}

在vue.config.js中配置代理转发以实现跨域：

devServer:{proxy:{'/proxyApi':{target:'http://dev.xxx.com',changeOrigin:true,pathRewrite:{'^/proxyApi':''}}}}

2、设置请求头和超时时间
创建 axios 实例时，配置通用请求头和超时时间：

constservice=axios.create({timeout:30000,headers:{'Content-Type':'application/json;charset=utf-8'}});

3、封装请求方法
封装 GET 和 POST 请求方法，便于统一管理和使用：

exportfunctionhttpGet({url,params={}}){returnnewPromise((resolve,reject)=>{axios.get(url,{params}).then(res=>resolve(res.data)).catch(err=>reject(err));});}exportfunctionhttpPost({url,data={},params={}}){returnnewPromise((resolve,reject)=>{axios({url,method:'post',data,params}).then(res=>resolve(res.data)).catch(err=>reject(err));});}

将封装的方法放在 api.js 文件中，便于统一管理：

import{httpGet,httpPost}from'./http';exportconstgetorglist=(params={})=>httpGet({url:'apps/api/org/list',params});

在页面中直接调用：

import{getorglist}from'@/assets/js/api';getorglist({id:200}).then(res=>{console.log(res);});

4、添加请求拦截器
在请求拦截器中添加通用逻辑，如设置token：

axios.interceptors.request.use(config=>{consttoken=localStorage.getItem('token');token&&(config.headers.Authorization=token);returnconfig;},error=>Promise.reject(error));

5、添加响应拦截器
在响应拦截器中处理通用错误和业务逻辑：

axios.interceptors.response.use(response=>{if(response.status===200){// 根据状态码处理业务逻辑returnPromise.resolve(response.data);}else{returnPromise.reject(response);}},error=>{// 处理错误returnPromise.reject(error);});

vue2和vue3使用axios的区别

全局挂载

• vue2：使用Vue.prototype，写法：Vue.prototype.$http = axios
• vue3：配置globalProperties，写法：app.config.globalProperties.$http = Axios

vue2

使用Vue.prototype

importaxiosfrom'axios'// 配置请求的跟路径axios.defaults.baseURL='http://127.0.0.1'Vue.prototype.$http=axios//使用：在各个组件或页面中 使用 this.$http请求接口

vue3

vue3中取消了Vue.prototype，因此需配置globalProperties挂载全局方法对象

constapp=createApp(App)/* 挂载全局对象 start */app.config.globalProperties.$http=Axios/* 挂载全局对象 end */app.use(router).use(store);app.mount('#app')

全局使用

• vue2：
• vue3：

vue2

使用this.$http

this.$http({url:'/api/v1/posts/list'}).then(res=>{//获取数据})

vue3

• 方法一：通过getCurrentInstance方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties
• 方法二：通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。其中有很多全局对象，如：route、route、route、 router 、store。如果全局使用了ElementUI后，还可以拿到store。如果全局使用了ElementUI后，还可以拿到store。如果全局使用了ElementUI后，还可以拿到message、$dialog等等

<template><divclass="box"></div></template><script>import{ref,reactive,getCurrentInstance}from'vue'exportdefault{setup(props,cxt){// 方法一constcurrentInstance=getCurrentInstance()const{$http,$message,$route}=currentInstance.appContext.config.globalPropertiesfunctiongetList(){$http({url:'/api/v1/posts/list'}).then(res=>{let{data}=res.data console.log(data)})}// 方法二const{proxy}=getCurrentInstance()functiongetData(){proxy.$http({url:'/api/v1/posts/list'}).then(res=>{let{data}=res.data console.log(data)})}}}</script>