1.安裝axios(npm install axios)亿卤;
2.在src目錄下新建一個request文件夾闽寡;
3.在request下新建兩個文件:
api.js(用來統(tǒng)一數(shù)據(jù)請求接口)梢薪;
http.js(封裝數(shù)據(jù)請求方法);
4.http.js里面:
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊蒂胞,用來序列化post類型的數(shù)據(jù)基公,后面會提到
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接口統(tǒng)一管理
*/
import { get, post} from './http'
//請求接口方法
export const apiAddress = p => post('studyUsers/getFlag', p);
6.組件里面調(diào)用接口:
import { apiAddress } from '@/request/api';// 導(dǎo)入我們的api接口
//方法里面調(diào)用函數(shù)
onLoad() {
? // 調(diào)用api接口,并且提供了兩個參數(shù)? ?
? apiAddress({"參數(shù)"}).then(res => {
? ? console.log(res,"我是vue請求的數(shù)據(jù)");
? })?
? }?