发表于： 2019-12-27 22:38:18

今天完成的事情

今天主要做的事情是学习了vue框架中的axios部分的内容，axios是完成我们前端后端数据交互的功能，通过后台传出的数据可以做一个内容的展示，亦可以提交我们的数据从而服务器返回一个可以判断的信息，这部分的内容和之前学习到的ajax4步通信是一样的但是通常axios用法会比ajax的使用相对步骤更少一些，用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);
  });

而且axios的创建正常我们需要把它写为局部的实例创建，因为通常我们在与接口传导数据是需要多个接口的，所以通常写成let 变量=axios.create({})让这个变量去做出请求动作。另外一个方面是在axios中有一个拦截器的写法，可以出现的信息是我们在请求发起前能做些什么，在请求出现错误时能做些什么。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });