vue中如何使用axios
我们在实际的Vue项目中经常需要与后端进行数据交互，但是在很大程度上我们需要用到这个插件，但是这里需要注意的一点是：在使用axios插件时，需要确认你的Vue项目是不是vue-cli，这是前提条件。到这里我们需要安装axios,这时候需要用npm进行全局安装，如：
npm install --save axios vue-axios qs
这里有一点需要注意：qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
等待安装完成，在安装完成后，如何使用呢？
那么既然要使用就肯定要引用到Vue项目中，如何引用呢？
我们在Vue项目的目录文件中找到main.js文件，在main.js文件中引用：
//引入axios，并加到原型链中
import axios from 'axios';
Vue.prototype.$axios =axios;import QS from 'qs'; //用来解决vue中post请求（详情）
Vue.prototype.qs = QS;
这里为了方便大家，我特地给大家准备了一个封装好的demo版axios，个人建议：最好是在与main.js的同级目录下新建个http.js文件，并复制粘贴下面这段代码，其中相关的接口数据根据个人情况来定，定义完成即可使用。
import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = ''; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
//在发送请求之前做某件事
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
console.log('错误的传参')
return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('网络异常')
return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
////返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
}
export default {
fetchPost,
fetchGet,
}
以上的准备工作已经完成，但是要知道我们在实际的开发中很多时候会遇到跨域这样的问题，那么如何利用axios来解决呢？下面我们先设置项目代理：Vue-cli3.0的在pack-8'; //配置请求头
axios.defaults.baseURL = ''; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
//在发送请求之前做某件事
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
console.log('错误的传参')
return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('网络异常')
return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
////返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
}
export default {
fetchPost,
fetchGet,
}
以上的准备工作已经完成，但是要知道我们在实际的开发中很多时候会遇到跨域这样的问题，那么如何利用axios来解决呢？下面我们先设置项目代理：可以在Vue-cli3.0的packsge.json的同级目录下创建一个vue.config.js文件，复制粘贴下面这段代码即可（当然你的项目中已经配置好了相关的代理信息，在你的配置文件中复制粘贴下面这段代码即可）
module.exports = {
//axios域代理，解决axios跨域问题
baseUrl: '/',
devServer: {
proxy: {
'': {
target: 'http://192.168.0.108:8888',//注意这里的端口设置根据实际项目开发的情况而定，这是我现在未被占用的端口号；
changeOrigin: true,
ws: true,
pathRewrite: {
}
}
}
}
}
此时保存好所有文件，重启项目应用配置即可。
到这里的时候我们的安装与配置均已准备完成，那么在页面中如何使用呢？
注意在你需要进行交互的Vue页面中导入并使用，如：
import https from '../https.js' // 注意用自己的http.js文件路径
// 请求后台数据==================
loginPost: function () {
let params ={'username': 'admin', 'password': 'admin123', 'rememberMe': 'true','isMobile':'1'}
https.fetchPost('/login',params ).then((data) => {
this.base.token = data.data.token
// console.log("this.base.tokenthis.base.token",this.base.token)
this.indexPost2(this.rres)
}).catch(err=>{
console.log(err)
}
)
},
indexPost2:function (date) {
var this_ = this
this_.check = false
var jobj ={data:{'menuDate': date,'token':this.base.token}}
let string = JSON.stringify(jobj)
let params = {dailyInfo:string}
https.fetchPost('/meals/mobile/getDailyMenuByDate', params)
.then((data) => {
this_.base.indexData = data
this_.check = true
// console.log('thenthenthenthen',data)
})
.catch((err)=>{
console.log(err)
})
},
// ================================================
},
这样就已经完成了。
本文内容主要转载于：https://www.cnblogs.com/nogodie/p/9853660.html
分类：vue.js；
