yb课堂 基于浏览器和node.js的http客户端Axios 《三十四》

什么是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
    }
})

项目结构