什么是Axios
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持Promise API
- 支持拦截请求和响应
- 支持转换请求和响应数据
- JSON数据的自动转换
- 客户端支持已防止XSRF
- 官方文档地址：http://www.axios-js.com/zh-cn/docs/
安装 cnpm install axios
GET请求例子
// 为给定 ID 的 user 创建请求 axios.get(‘/user?ID=12345‘) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 上面的请求也可以这样做 axios.get(‘/user‘, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
POST请求例子
axios.post(‘/user‘, { firstName: ‘Fred‘, lastName: ‘Flintstone‘ }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
执行多个并发请求
function getUserAccount() { return axios.get(‘/user/12345‘); } function getUserPermissions() { return axios.get(‘/user/12345/permissions‘); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));
使用axios封装请求后端api接口
在src下创建Request.js
Request.js
import axios from ‘axios‘ const service=axios.create({ // url=base url+request url baseURL:"http://127.0.0.1:8081", //配置请求超时时间 timeout:5000 }) //全局导出 export default service
在src下创建api文件夹
在src/api下创建getData.js
import axios from ‘../Request‘ //注册接口 export const registerApi = (name, phone, pwd) => axios.post("/api/v1/pri/user/register", { name, phone, pwd }) //登陆接口 export const loginApi = (phone, pwd) => axios.post("/api/v1/pri/user/login", { "phone": phone, "pwd": pwd }) //轮播图 export const getBanner = () => axios.get("/api/v1/pub/video/list_banner") //视频列表 export const getVideoList = () => axios.get("/api/v1/pub/video/list") //视频详情 export const getVideoDetail = (vid) => axios.get("/api/v1/pub/video/find_detail_by_id", { params: { video_id: vid } }) //下单接口 export const saveOrder = (token, vid) => axios.post("/api/v1/pri/order/save", { "video_id": vid }, { headers: { "token": token } }) //订单列表 export const getOrderList = (token) => axios.get("/api/v1/pri/order/list", { params: { "token": token } }) //用户信息接口 export const getUserInfo = (token) => axios.get("/api/v1/pri/user/find_by_token", { params: { "token": token } })
项目结构