首先,你需要在vue项目中安装Axios库。
npm install axios
安装成功后,你可以在Vue组件中引入Axios并使用它来请求API数据
示例:
import axios from ‘axios’;
export default{
data() {
return {
apiData : null
};
},
mounted() {
axios.get(‘http://api.example.com/data’).then(responcse=> {
this.apiData = response.data ;
})
.catch(error => {
console.error(error);
});
}
}
上述示例中,使用axios.get方法发送了一个GET请求到http://api.example.com/data接口,
并通过.then 和 .catch 方法处理成功和失败的回调(=>)。
成功时,将API 返回的数据赋值给apiData变量。
如果你希望在组件中使用代理服务器来访问API,可以在Vue项目的根目录中创建一个vue.config.js文件,并配置代理服务。
示例:
module.exports= { devServer: { proxy: { ‘/api’ :{ target : ‘http://api.example.com’ , changeOrigin : true, pathRewrite: { ‘ ^/api ’ : ‘ /api ’ } } } } }
上述配置将所有以/api/开头的请求代理到http://api.example.com接口。
例如,使用axios.get(‘/api/data’)来发起代理请求。
需要注意的是,配置代理服务器后,需要重启Vue开发服务器才能生效