在react项目中封装api接口

安装axios,qs

npm i axios qs -S

封装为js文件

1.chenHttp.js

import axios from 'axios'
import qs from 'qs'

const HTTP = axios.create({
    baseURL: "这里填的是接口前边的url",
    withCredentials: true,
    transformRequest:(data)=>{
        return qs.stringify(data)
    }
});

//返回一个Promise(发送post请求)
export function fetchPost(url, param) {
    return new Promise((resolve, reject) => {
        HTTP.post(url, param)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default fetchPost;

2.封装的api

import { fetchPost } from './chenHttp'
//获取列表
export async function getList(params) {
    return await fetchPost("/lecturer/lists?page=1&rows=20", params)
//注册
export async function getRegister(params) {
    return await fetchPost("/user/register", params)
}

3.在需要获取数据的地方引入传入参数就可以使用

import {getList} from './api'
	getList({
		传递的参数对象形式
	}).then(res=>{
		console.log(res)
	})

最后

以上就是深情乌龟为你收集整理的在react项目中封装api接口的全部内容，希望文章能够帮你解决在react项目中封装api接口所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。