axios

安装axios

GET

case1

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

case2

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

POST

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

API

axios(config)

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// GET request for remote image
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url,[config])

// Send a GET request (default method)
axios('/user/12345');

axios.create(config)

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

config

主要  url / method / headers / params / data / timeout 

Response

主要  data / status (200) / statusText (ok) / headers / config / request

Interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

封装axios

import axios from 'axios'

import { tips, handleError } from './error'

axios.interceptors.request.use(config => {
  // 添加Loading
  return config
}, err => {
  console.log(err)
  return err
})
axios.interceptors.response.use(config => {
  // 删除Loading
  return config
}, err => {
  console.log(err)
  return err
})
class HttpReuest {
  request (url, data, method = 'GET') {
    return new Promise((resolve, reject) => {
      axios({
        url,
        data,
        method,
        headers: {},
        timeout: 2000
      }).then(res => {
        const { status, data } = res
        if (status === 200) {
          if (data.code === 0) {
            resolve(data.data)
          } else {
            // 统一做错误处理
            const tip = tips[data.code] ? tips[data.code] : tips[1]
            handleError(tip)
          }
        } else {
          handleError(tips[1])
          reject(new Error())
        }
      })
        .catch(err => {
          handleError(tips[1])
          reject(err)
        })
    })
  }
}

export default HttpReuest