axios配置

安装

根目录运行

npm install axios -S

配置

在src/main.js配置 axios
导入 axios 并在 new Vue()中配置

import axios from ‘…/node_modules/axios’

Vue.prototype.$axios = axios;
new Vue({
el: ‘#app’,
router,
store,
axios,
components: { App },
template: ‘’
})

简单使用:

.then 里是后台返回结果
.catch 里是网络错误或后台服务器出bug等等

get方式
this.$axios.get(’/user’, {
数据
})
.then(function (response) {
})
.catch(function (error) {
});

post方式
this.$axios.post(’/user’ , {
params: {
数据对象(此处根据情况)
}
})
.then(function (response) {
})
.catch(function (error) {
});

vue 中配置跨域访问后台

proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:18080', // 后台访问地址
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

转自https://www.kancloud.cn/wsj-/vue/645840

在Vue项目中使用Axios进行网络请求是非常常见的配置。下面是一个简单的Vue Axios配置的示例: 1. 首先,你需要在项目中安装Axios。可以使用npm或者yarn命令进行安装: ``` npm install axios ``` 或者 ``` yarn add axios ``` 2. 在Vue项目中创建一个单独的文件,例如`api.js`,用于封装Axios配置和请求方法。 ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做一些处理,例如添加请求头等 return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据进行处理,例如解析数据等 return response.data; }, (error) => { // 处理响应错误 return Promise.reject(error); } ); // 封装请求方法 export default { get(url, params) { return instance.get(url, { params }); }, post(url, data) { return instance.post(url, data); }, // 其他请求方法,例如put、delete等 }; ``` 3. 在需要使用Axios进行网络请求的组件中,引入`api.js`文件,并调用封装好的请求方法。 ```javascript import api from './api.js'; export default { methods: { fetchData() { api.get('/data') .then((response) => { // 处理请求成功的数据 }) .catch((error) => { // 处理请求失败的错误 }); }, }, }; ``` 这样,你就可以在Vue项目中使用Axios进行网络请求了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值