使用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请求都可以比较简便的进行处理