添加axios实现网络请求

顶部内容和底部内容我们基本写完了，接下来我们应该是需要中间部分的内容。

这部分内容我们得从后台服务器中获取

所以我们需要一个axios框架来请求数据

Promise based HTTP client for the browser and node.js

直接安装方法

cnpm install axios --save

执行下来如下：

打开package.json会发现，多了这个

创建一个工具类封装一下

如果我们直接使用axios发起请求，大概会这样子

 import axios from 'axios';
  axios.defaults.withCredentials = true // 跨域
  axios.defaults.timeout = 100000;

axios.get("http://localhost:50200/api/article/detail/" + params.id).then(result => {
	//TODO:
}

数据还得处理一下才能使用

我们可以稍微封装一下

我们创建一个目录utils

创建一个http.js

import axios from 'axios';

//携带证书
axios.defaults.withCredentials = true;
//设置超时时间
axios.defaults.timeout = 100000;

export default {

  //get请求
  requestGet(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // post请求
  requestPost(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // delete请求
  requestDelete(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // put请求
  requestPut(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

这样子我们就精简成增删改查了

至于怎么使用，请看后面的课程吧，详情请看视频课程内容。感谢同学们的支持与关注。