- 在src目录下新建request文件夹
- request文件夹新建http.js
- request文件夹新建api.js
下载
yarn add axios
在http.js 中
import axios from 'axios'
import QS from 'qs'
import { Toast } from 'vant';
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://192.168.3.30:8010/';
// 请求拦截器
axios.interceptors.request.use(function(config) {
// 所有请求之前都要执行的操作
Toast.loading({
message: '加载中...',
forbidClick: true,
duration:0
});
return config;
}, function(error) {
// 错误处理
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function(response) {
// 所有请求完成后都要执行的操作
Toast.clear()
return response;
}, function(error) {
// 错误处理
return Promise.reject(error);
});
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
})
}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
})
}
在api.js中
import {
post
} from './http'
export const apiAddress = p => post('api/prizes/prizex', p);
export const prizez = p => post('api/prizes/prizez', p);
在需要使用的vue页面中
import {
apiAddress,prizez
} from '@/request/api';
created() {
this.fectList()
this.getList()
},
methods: {
async getList(){
let res =await prizez({
activityid: '1',
})
console.log(res);
},
async fectList() {
try{
let res =await apiAddress({
activityid: '1',
})
console.log(res);
}catch(e){
console.log(e)
}
},
}
//或者
getList(){
prizez({
activityid: '1',
}).then(res => {
console.log(res)
})
}