Axios快查表

学习了ajax的相关知识，了解到axios是一个基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端的库，axios 的API很友好，我们可以很轻松地在项目中直接使用。

发送GET请求

// Make a request for a user with a given ID
axios.get('/user?name=xxx')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 也可以这样做
axios.get('/user', {
    params: {
     name: XXX
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  //如果想要对请求有更多的操作
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
 });

发送POST请求

axios.post('/user', {
   name: 'Tom',
   password: '123456'
 })
 .then(function (response) {
   console.log(response);
 })
 .catch(function (error) {
   console.log(error);
 });
 
// Send a POST request
axios({
 method: 'post',
 url: '/user/12345',
 data: {
      name: 'Tom',
   password: '123456'
 }
});

发起多个请求

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) {
    // 当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }));

取消请求

// Cancel request with cancel token
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

// Create cancel token

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

创建实例

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

修改实例的配置 可以在实例创建的时候修改也可以在实例创建后修改

var instance = axios.create({
  baseURL: 'https://api.example.com'
});//创建时修改
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;//创建后修改

关于response的相关

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

拦截器

1. 关于请求的拦截器

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);
  });

2. 关于响应的拦截器

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

3. 移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
 axios.interceptors.request.eject(myInterceptor);

错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
// Custom HTTP status code error
axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Reject only if the status code is greater than or equal to 500
  }
})