前提条件:vue-cli 项目
安装:
npm
npm
在main.js导入:
// 引入axios,并加到原型链中 import axios from ‘axios‘; Vue.prototype.$axios = axios; import QS from ‘qs‘ Vue.prototype.qs = QS;
封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.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, }
开发环境一般要跨域,解决跨域问题(设置代理):vue-cli 3.0的在 package.json 同级目录新建一个 vue.config.js 文件,加入下面代码,其他版本找到配置文件的devServer加入代码
:
module.exports = { //axios域代理,解决axios跨域问题 baseUrl: ‘/‘, devServer: { proxy: { ‘‘: { target: ‘http://192.168.0.108:8090‘, changeOrigin: true, ws: true, pathRewrite: { } } } } }
修改完后记得重启项目应用配置
然后就到收获的时候了,在要请求的vue模块中导入并使用:
import https from ‘../https.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) }) }, // ================================================ },
文字不是很多,但重要的都在这,看代码的注释就行了
不懂的可以留言,我们一起探讨