测开技能--Web开发 React 学习（十三）网络请求封装

雷子

发布于 2021-03-15 12:58:35

4090

发布于 2021-03-15 12:58:35

文章被收录于专栏：雷子说测试开发

这是第十三篇文章。

我们接下来肯定还是有很多的请求要写的，我们是不是需要封装下，利用封装后，再来封装后的方法再来解决呢。

我们去简单的封装，我们在src创建一个until的包，然后创建一个httpcommon.js文件

我们去封装常用的请求。

import qs from "querystring"
export function httpGet(url, params) {
    if (params) {
        let paramsArray = [];
        //拼接参数
        Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
        if (url.search(/\?/) === -1) {
            url += '?' + paramsArray.join('&')
        } else {
            url += '&' + paramsArray.join('&')
        }
    }
    const reslut = fetch(url, {
        mode: 'cors',
        method: "GET",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },

    });
    return reslut;
}
export function httpPost(url, parame) {
    const reslut = fetch(url, {
        mode: 'cors',
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: qs.stringify(parame)
    })
    return reslut;
}
export function httpPut(url, parame) {
    const reslut = fetch(url, {
        mode: 'cors',
        method: "PUT",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: qs.stringify(parame)
    })
    return reslut;
}

这里的Content-Type 类型可以根据自己的实际需求去改变。

然后我们需要去配置下我们通用的url，这样方便我们去查找，我们在src 新建 api目录，然后去创建base.js文件，在这里我们配置我们去请求的url 的路径，在这里我们以后可以把我们的一些url的配置到这里。这样我们再去改问题的时候，就可以很快的找到了，便于管理。

const base={
    api:"/openapi/api/v2"
}
export default base

那么我们来在写一个通用的处理请求的js文件，以后我们的处理请求的都可以放置到这里的，命名为 index.js

import base from "./base"
import { httpPost} from "../until/httpconmon"
const api={
    getTulin(){
        return httpPost(base.api);
    }
} 
export default api

这样我们去统一管理我们的api 请求即可，那么我们接下来要在我们的请求当中替换，这里呢，我们修改之前的文件，先引入我们的请求

import api from './api/index'

我们在去改造我们的请求

 componentDidMount(){
        api.getTulin().then(res=>res.json()).then((data)=>{
            console.log(data)
        }).catch(error =>{
            console.log(new Error(error))
        })
    }

我们去启动我们的服务，npm start ，然后我们去访问，查看下，是否正常请求。