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

  }) 

  } 

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容