React中使用axios并将其进行简单的封装

使用npm 或者 cnpm 下载axios

cnpm install axiso --save

ajax.js

/**
 * 发送异步ajax请求的函数模块
 * 封装axios库
 * 函数的返回值是promise对象
 * 优化：统一处理请求异常
 *  在外层包一个自己创建的promise对象
 *  在请求出错时，不去reject(error)，而是显示错误信息，并返回
 * 优化2：异步得到的不是response，而是response.data
 *  在请求成功resolve时：直接resolve(response.data)
 */

import axios from 'axios'
import {
     message} from 'antd'

export default function ajax(url, data = {
     }, type = 'GET') {
     
    return new Promise((resolve,reject) => {
     
        let promise;
        //1，执行异步ajax请求
        if (type === 'GET') {
     //发送get请求
            promise = axios.get(url,{
     
                params: data
            })
        } else {
     //发送POST请求
            promise = axios.post(url,data);
        }
        promise.then(response => {
     
            //2.如果成功，调用resolve(value)
            resolve(response.data);
        }).catch(error => {
     
            //3.如果失败了，不调用reject(reason)，而是提示异常信息
            message.error('请求出错:',error.message);
            resolve(error.message);
        })
    });
}

这样将请求数据和返回数据或者错误进行统一处理，

//获取商品分页列表
export const reqProducts = (pageNum, pageSize) => ajax(BASE + '/manage/product/list', {
     pageNum, pageSize});

//更新商品的状态
export const reqUpdateStatus = (productId,status) => ajax(BASE+'/manage/product/updateStatus',{
     productId,status},'POST');

GET 和POST请求都可以比较简便的进行处理