vue里面封装数据请求

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请求的数据");

  }) 

  }