react前后端对接(axios)

全局配置

1  安装axios     npm install axios -S   

2  安装cookie    npm install react-cookies -S

3  src文件目录下新建文件夹api

4  api 下新建statecode.js  //该页面用来返回请求状态
export default  {
    "-1": "系统繁忙",
    "0": "请求成功",
    "1001":	"资源已存在",
    "1002":	"参数错误",
    "1003":	"两次密码不一致",
    "1004":	"手机号错误",
    "1005":	"邮箱格式错误",
}

5  api下新建config.js    //该页面用来设置请求地址
module.exports = {
    base: "http://demo.port.net:8000"
};

6 api下新建index.js   //该页面用来引入并暴露相关接口，相当于接口汇总(每配置一个模块的接口，都要在这里汇总，别忘了)
import codes from './statecode.js';   //状态码
import login from './login.js';    //登录页面
import product from './product.js';   //产品页面
import buy from './buy.js';  //购买页面
 
export default {
    stateCode: codes,
    ...login,
    ...product,
    ...buy,
}

7  api下新建login.js, product.js, buy.js等相关模块的接口页面(这里给post,get,delete等每种请求写一个例子)
import axios from 'axios';  //引入axios
import { base } from "./config.js";  //引入请求地址
import cookie from 'react-cookies';//引入cookie保存登录信息

import {message} from 'antd';

export default {

        //***登录 （POST）*** 
        async loginApi(params){   //我习惯在接口命名时，后面加上Api，这样容易区分
            return await axios.post(`${base}/api/demo/login`,params).then((res)=>{  //登录接口不需要请求头，不仅如此，请求头里的cookie还是由登陆接口的获取的，存储下来后给其他接口使用
                return res.data;
            }).catch((error)=>{
                message.error("服务器出错")
            })
        },


        //***登录后获取用户信息 （GET）***
        async getUserInfoApi(params){
            return await axios.get(`${base}/api/demo/info`,{   //get请求只需要两个参数，所以params和headers放在了一起
                params,
                headers:{
                    "token":cookie.load("usertoken")   //这里的cookie需要在用户登陆后，将接口的返回值存进cookie里，例子在第8步里
                }
            }).then((res)=>{
                return res.data;
            }).catch((error)=>{
                message.error("服务器出错")
            })
        },

        //***修改密码 （POST）***
        async changePasswordApi(params){
            return await axios.post(`${base}/api/demo/modifycode`,params,{
                headers:{
                    "token":cookie.load("usertoken")
                }
            }).then((res)=>{
                return res.data;
            }).catch((error)=>{
                message.error("服务器出错")
            })
        },

        //***获取产品列表 （GET）***
        async productListGetApi(params){
            return await axios.get(`${base}/api/product`,{
                params,
                headers:{
                    "token":cookie.load("usertoken")
                 }
            }).then((res)=>{
                return res.data
            }).catch((error)=>{
                mes