axios前后端交互

今天有点儿累了，由于工作失误，导致今晚不开心，今天不想写了… …

• npm官网的axios
• GitHub的axios

axios的基本用法

get请求用法

// 请求一个给定的用户ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // 请求处理结果
    console.log(response);
  })
  .catch(function (error) {
    // 请求处理错误
    console.log(error);
  })
  .then(function () {
    // 成功与否总是执行
  });

• 上面的请求也可以这样写

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    
  });  

• 使用es7异步写法

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(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');
}
Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

关于拦截器

• 请求拦截器：在请求之前去对一些请求工作进行统一的配置

axios.interceptors.request.use(function (config) {
    // 请求之前做一些事情
    return config;
  }, function (error) {
    // 请求错误做一些事情
    return Promise.reject(error);
  });

• 响应拦截器：在请求成功后做一些统一事情

axios.interceptors.response.use(function (response) {
    // 状态码是2xx，都会导致该函数触发
    // 做一些响应数据事情
    return response;
  }, function (error) {
    // 状态码不是2xx都会触发这个函数
    // 做一些错误响应的事情
    return Promise.reject(error);
  });