1.安装axios(npm install axios);
2.在src目录下新建一个request文件夹;
3.在request下新建两个文件:
api.js(用来统一数据请求接口);
http.js(封装数据请求方法);
4.http.js里面:
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到
axios.defaults.baseURL = 'https://book.supercustomer.cn'; //
//封装请求方法
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)
})
});
}
5.api.js里面:
/**
* api接口统一管理
*/
import { get, post} from './http'
//请求接口方法
export const apiAddress = p => post('studyUsers/getFlag', p);
6.组件里面调用接口:
import { apiAddress } from '@/request/api';// 导入我们的api接口
//方法里面调用函数
onLoad() {
// 调用api接口,并且提供了两个参数
apiAddress({"参数"}).then(res => {
console.log(res,"我是vue请求的数据");
})
}